mellson Posts

mellson

•Created by mellson on 4/24/2023 in #❓-help

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();
      },
    },
  },
});

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();
      },
    },
  },
});

10 replies