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.
Which method is best for prefetching on the server 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 asinitialData2. 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
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
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
Similar Threads
Was this page helpful?
