Forsect•3mo ago

Invalidate all queries in new TanStack React Query Setup

Hey, I set up the new tRPC flow for Next.js using TanStack React Query from docs: https://trpc.io/docs/client/tanstack-react-query/setup How can I add to it, previously implemented and documented (https://trpc.io/docs/client/react/useUtils#invalidate-full-cache-on-every-mutation ) queries invalidation on every mutation in app? We don't use the createTRPCReact anymore and I can't seem to find any other method from the docs where I can pass these overrides :x Thanks!

3 Replies

FluX•3mo ago

Maybe like this?

const queryClient = new QueryClient({
  mutationCache: new MutationCache({
    onSuccess: () => {
      queryClient.invalidateQueries()
    },
  }),
})

const queryClient = new QueryClient({
  mutationCache: new MutationCache({
    onSuccess: () => {
      queryClient.invalidateQueries()
    },
  }),
})

Found here https://tkdodo.eu/blog/automatic-query-invalidation-after-mutations

ForsectOP•3mo ago

That actually makes a lot of sense! I guess I still have to rewire my tRPC brain to good old react-query flow :x Seems to work correctly, not sure if I have to worry about some "tRPC-specific" cases here but for now it looks great, thanks!

Nick•3mo ago

Hopefully it's a rewire you enjoy! We're much more TRQ native now which means their docs are more useful

Invalidate all queries in new TanStack React Query Setup

Did you find this page helpful?