schlabach•13mo ago

Prefetch on useContext() is not being picked up by react-query.

I need to prefetch one of my procedures to pre-load data for a page that the user can navigate to. This is all happening within a Client Component in Next 13's app directory Inspecting the Network tab in Chrome's devtools, I can see that the prefetch calls are being made, and I can inspect the data inside the response, which is correct. However, when I look at React Query's devtools, the query is not being picked up, and is therefore not being cached. When the user navigates to the page that should have prefetched data, trpc makes a fresh query and doesn't use the prefetch. I am using code that looks like this:

const utils = trpc.useContext()

utils.router.procedure.prefetch({...parameters})

const utils = trpc.useContext()

utils.router.procedure.prefetch({...parameters})

4 Replies

schlabach•13mo ago

Has anyone been able to figure this out?

.traevelliath•13mo ago

Isn’t the point of prefetch to be called inside getServerSideProps? Then you can get the data from the client by using getData().

schlabach•13mo ago

Trpc’s docs do talk a lot about prefetching in getServerSideProps. But Tanstack Query supports prefetching and caching data on the client as well, which is what I need to do https://tanstack.com/query/v4/docs/react/guides/prefetching https://trpc.io/docs/client/react/useContext

.traevelliath•13mo ago

Maybe this will be of help. https://tkdodo.eu/blog/seeding-the-query-cache

Seeding the Query Cache

With suspense for data fetching on the horizon, it is now more important than ever to make sure your cache is seeded properly to avoid fetch waterfalls.