TRPC not writing to QueryCache?
Hi all, I've been using TRPC in a production site for over a year now. I recently have made some additions to this site that required cache invalidations, but for whatever reason I couldn't get them working. Troubleshooting the reason led me to discover that it appears the querycache my trpc instance is using is just always empty. (Empty cache = nothing to invalidate?).
I built the app using T3 and when I migrated to app router I built a new T3 app and used it as a reference. I've been looking at the differences between a fresh T3 creation and my app and I just can't find anything that could be the culprit. I've tried saving the queryclient to the window and it looks fine except it’s got an empty cache.
6 Replies
What I see in devtools. TRPC calls shown in the console, but nothing in tanstack query devtools

Gist
TRPC QueryClient Empty ( "_" == "/" file name underscores are folde...
TRPC QueryClient Empty ( "_" == "/" file name underscores are folder path) - server_api_trpc.ts
Are there other files I should be looking at for this? Any other things I can log or inspect?
package.json
I just realized it's probably because I'm calling all trpc endpoints server side without prefetch. So they're not in the cache. Will try switching to prefetch with hydration boundary and report back
That was the issue!
This ended up being quite confusing. It might be nice to have a note in the invalidate / refetch docs (I suppose within react query docs) that calls this out.

Could it be you've got multiple QueryClients in your app somehow? tRPC doesn't need a dedicated one, it should be the global one
Hey @laurence - you wouldn't happen to have an example of how you got prefetch/hydration working with the new react-query implementation? having the same issue with the data not being in cache
Nevermind, got it working in the end 😄 Thanks for the code snippets above, didn't know this helper existed but helped resolve the issue for me:
createHydrationHelpers