Best way to prefetch queries with tRPC and app/ dir
I am in the process of switching my pages/ T3 app to the new fancy app directory and know that React Query has a few ways to prefetch queries, and was wondering which one is the best for use with T3 app dir.
1. initialData
The easiest, but also the most annoying in my eyes. You fetch the data on the server and then pass it down as
initialData
.
2. prefetchQuery & HydrationLayer
Saw this in the docs but i’m not sure if it will work with the extended version of react-query that tRPC uses.
3. @tanstack/react-query-next-experimental
This seems to be brand new, and I can’t really tell what’s different from the second option.
Which method is best for prefetching on the server with T3 app dir?Solution:Jump to solution
I think the main takeaway is:
1. prefetch the data using .prefetch()
2. dehydrate the state
3. pass the dehydrated state into react query
4. call .query(), which will pull from the cache instead of re-fetching...
7 Replies
I’ve used a setup like this before and it’s worked pretty well:
what does the ReactQueryHydrate component look like or is it just a client wrapper
Solution
I think the main takeaway is:
1. prefetch the data using .prefetch()
2. dehydrate the state
3. pass the dehydrated state into react query
4. call .query(), which will pull from the cache instead of re-fetching
yeah, makes sense
thank you!!
@Endgame1013 can we have repo for this, because I don't get the import { createSSRHelper } from '@/server/api/ssr'; implementation
@yaba101, here is the code for that portion, sorry for the oversight: