mellson•16mo ago

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

3 Replies

mellson•16mo ago

Hey @alex / KATT sorry for the P.I.N.G 😅 But if you have a minute I'd love to understand this useMutation override a bit better

Alex / KATT 🐱•16mo ago

yo if you await opts.originalFn() first it should call your callback before the invalidation 🤔 the behaviour you're experiencing is unexpected to me as well https://github.com/trpc/trpc/blob/8e66ad1a3491e3778c5461d0fe934706048b22ea/packages/react-query/src/shared/hooks/createHooksInternal.tsx#L340-L358 that's the sauce basically we override how useMutation() in react-query works so we override onSuccess and pass it as a callback to your override fn

export const trpc = createTRPCReact<AppRouter, SSRContext>({
  unstable_overrides: {
    useMutation: {
      async onSuccess(opts) {
        // Invalidate all queries `onSuccess`

        // Order here matters.
        // Invalidation is triggered after the user's `onSuccess`.
        // Enables route changes in `onSuccess` without having a flash of content change whilst redirecting.
        await opts.originalFn();
        if (opts.meta.noInvalidate === true) {
          return;
        }
        await opts.queryClient.invalidateQueries();
      },
    },
  },
});

export const trpc = createTRPCReact<AppRouter, SSRContext>({
  unstable_overrides: {
    useMutation: {
      async onSuccess(opts) {
        // Invalidate all queries `onSuccess`

        // Order here matters.
        // Invalidation is triggered after the user's `onSuccess`.
        // Enables route changes in `onSuccess` without having a flash of content change whilst redirecting.
        await opts.originalFn();
        if (opts.meta.noInvalidate === true) {
          return;
        }
        await opts.queryClient.invalidateQueries();
      },
    },
  },
});

this is what I do, this enables opting out on invalidation on certain mutations as well

mellson•16mo ago

Thanks Alex! It was an error on my end. I put the onSuccess callback in the call to mutateAsync instead of putting it on the original useMutation 🤦 After moving it there, everything works as expected. I like your approach with putting noInvalidate on the meta; I'll do the same for us.