How should you approach invalidating queries in trpc?
Is is possible to create a onSuccess handler inside procedures? I don't want to write the same invalidating onSuccess function on every query across my application. Creating reusable hooks kinda goes against the ease of trpc. Is there a good way to approach this?
15 Replies
+1, I have the same problem. Please help
invalidation happens clientside
the server doesn't know that you're contacting it from react query, so it cant tell you to invalidate anything
you can invalidate everything after every mutation (this is actually not that terrible of an idea), or invalidate in onSuccess, either in the file you're calling the query from or an extracted hook
Why should we not be able to do that somewhere inside trpc? Not all parts of trpc are server side, I just hate the idea of creating a custom hook for every trpc procedure where I add the invaldation logic
what do you mean by "inside trpc"
OnSuccess is a React query concept on the client side.
You can have a hook which contains the mutation and invalidation logic and use that wherever u want
Personally I don’t see anything wrong with duplicating the logic, people go overboard trying to keep things dry and end up with premature abstractions
yea but
invalidation is a react query concept
the server doesnt know what invalidation is
Yeah that’s I’m saying, trying to invalidate from trpc server seems… not possible?
Unless you wire up some kind of subscription which just tells react query which query keys to invalidate (don’t recommend)
i did this one time for a real time app and it worked really well for what we were doing
although it only told react query to invalidate one specific query it wasn't generic
Can you share an example? I was previously using rtk query and I had every relation mapped
It's kinda weird to me to write the same invalidation logic in 30 places, I'm fetching user portfolio and editing it in bunch of places, I want to always fetch a full portfolio whenever even a small change has been made.
This is what I'm doing right now, works good but I feel like this is not the way to go
the way rtk query does invalidation is pretty nice... it'd be cool if there were a way to build an invalidation map for tRPC (or automatically generate it) and then not have to deal with it at the component level
Haven’t personally tried this, but could this be achieved by overriding the React Query client defaults in the tRPC client? So far, I’ve only invalidated queries on a per-mutation basis.
1. You can abstract just the invalidation logic into a custom hook which returns an invalidatePortfolio function. Pass it down to as many mutations as you want
2. Consider just surgically updating the cache instead of invalidating the queries
3. The invalidation logic shouldn’t be that bad to begin with. How many queries do you need to invalidate each time the portfolio is updated?
4. Consider going all in on a client with a normalised cache if you feel like having to write your own invalidation logic is too cumbersome
1. We know this is possible but the questions is if we can avoid it since this will lead to us potentially maintaining a lot of additional code
2. We don't care about that much optimizing, we might do it once our application skyrockets with popularity and the costs of querying will be too high but for now it's not the case.
3. I wan't a single query to be updated
4. I believe it will be not cost effective. The maintaining and writing code for that will cost way more than just paying few more bucks for extra queries.
Take a look how rtk query implements it, it's very DX friendly way
It’s like an extra two lines of code to get the trpc context and pass it in the onSuccess handler.
Btw it might be worth refetching instead of invalidating the queries, since you know for sure only one query needs to be updated.
RTK tags look cool
Creating a reusable hook is fine, don’t shy away from it if it really solves your issue
This is what y'all need. And it only refetches what you have on the page. Removed all my invalidation logic on my hooks after this.
https://trpc.io/docs/reactjs/usecontext#invalidate-full-cache-on-every-mutation
useContext | tRPC
useContext is a hook that gives you access to helpers that let you manage the cached data of the queries you execute via @trpc/react-query. These helpers are actually thin wrappers around @tanstack/react-query's queryClient methods. If you want more in-depth information about options and usage patterns for useContext helpers than what we provide...