T
tRPC

Full cache invalidation and timing problem

Full cache invalidation and timing problem

Mmellson4/26/2023
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();
},
},
},
});
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
AKAlex / KATT 🐱4/26/2023
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
Mmellson4/27/2023
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.

Looking for more? Join the community!

T
tRPC

Full cache invalidation and timing problem

Join Server
Recommended Posts
Using Next.JS + FastifyMy node environment is Node 18, powered by PNPM. What's wrong: I have a few requirements for my appError Handling vs Error FormattingI'm a bit confused from the docs about how I should be handling errors on the server. The Error HandNext.js body-parsing issueA thead to discuss this issue: https://github.com/trpc/trpc/issues/4243Cannot find module '@trpc/react-query/server' or its corresponding type declarations```ts import { createServerSideHelpers } from '@trpc/react-query/server' ``` This should work, righProcedure with generic input?Is there a way to define a procedure so that it takes input with type parameters, and returns outputDelete item {0: {json:{id: 12324}}}When i try to mutate/delete item with id i am geting this payload `{0: {json:{id: 12324}}}`, withouQuery function depends on a variableIn tRPC v10 accessing a specific path is really easy, but because of that I don't control the query 'useInfiniteQuery' hook disappeared after moving to TurborepoI am using Turborepo with Next.js with the following layout, originally a T3 app - `/apps/app` - `/pconvert the result to date objectsI am not sure if this is even trpcs responsibility but I would like to get my date objects as date oECONNREFUSED with TRPC call on VercelAnyone run into this before? I just deployed my app to Vercel and I run into this error when I triggInvalid ValDoes TRPC string input have a limit? https://prnt.sc/KlXlyoGrzP8P Edit: It was actually from stripis possible to combine next-minimal-starter with react-router-dom ?Hi, I'm trying to combine https://github.com/trpc/trpc/tree/main/examples/next-minimal-starter and rusing same query for entries appHow to use same query for many components? I don't want to request api for many times ;-; I can't pHow can I make a direct fetch on a router endpoint from TRPC in NextJS on client?In the documentation you can use the vanilla TRPC client like this: ``` const bilbo = await clientHow to get unwrapped errors out of proxy clientI'm using sveltekit and in order to redirect from SSR you need to throw an error: https://kit.sveltCan you get the queryClient without using a hook?Can you get the queryClient without using a hook?How can I reset the cursor when using useInfiniteQuery?I have various filters that I can set for the query, but when setting those filters I need to reset How does routing work in tRPC especially when using merged routers?I am having trouble understanding how tRPC lays out routes. Let's say I have the below ```typescripwhere is useQuery [key]?Learning trpc, i use to tanstack with queryKey, can not find how that works with trpc, if i want tuseInfinieQuery with initialData, Refetch only after second change of inputsHi everyone, I have the problem as stated in the title. My code looks like the following: ```ts