mellsonM
tRPC•3y ago•
9 replies
mellson

Full cache invalidation and timing problem

I'm really enjoying using the full cache invalidation https://trpc.io/docs/reactjs/usecontext#invalidate-full-cache-on-every-mutation

But I'm debugging some timing issues around the 
onSuccess
 call. And I'm not sure which 
onSuccess
 call is meant to be called by the await opts.originalFn() in the following snippet. It says it will call the 
onSuccess
 defined in the 
useQuery
 call. I naively maybe thought it would call the 
onSuccess
 defined in the useMutation. But when I try to do some simple console logging, I can't figure out the timing of these calls. Both the originalFn and invalidateQueries calls get fired before any of my 
onSuccess
 calls. So it has left me a little confused 🤔

TL;DR; Where do I define the opts.originalFn() getting called here?

export const trpc = createTRPCReact<AppRouter, SSRContext>({
  unstable_overrides: {
    useMutation: {
      /**
       * This function is called whenever a `.useMutation` succeeds
       **/
      async onSuccess(opts) {
        /**
         * @note that order here matters:
         * The order here allows route changes in `onSuccess` without
         * having a flash of content change whilst redirecting.
         **/

        // Calls the `onSuccess` defined in the `useQuery()`-options:
        await opts.originalFn();

        // Invalidate all queries in the react-query cache:
        await opts.queryClient.invalidateQueries();
      },
    },
  },
});
Was this page helpful?