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

Sschlabach

6/23/2023

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})

Sschlabach

6/26/2023

Has anyone been able to figure this out?

T.traevelliath

6/29/2023

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

Sschlabach

6/29/2023

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

T.traevelliath

6/29/2023

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

Looking for more? Join the community!

tRPC

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

Join Server

tRPC

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

Join Server

Recommended Posts

how do you consume trpc endpoints from postman?I'm currently trying to set up testing for a full stack project while using trpc. but im unsure how tRPC 10 Mutations Firing Twice in Deployed Releases OnlyWe have a newly-upgraded tRPC 10 / ReactQuery 4 app and on two pages on which we have a lot of mutat useQuery with query paramsHi, I'm wondering how to correctly handle query params as a useQuery input using Nextjs. ``` const infiniteQuery always undefined cursorHey there ! I'm struggling a bit to understand who the `useInfiniteQuery` is supposed to work with Migrating v9 to v10 - - using the client?I'm migrating a large project from trpc v9 to v10. There is a section of the code that uses the resu Using tRPC and something else too? For building a mobile app / public API.A bit noobish, but I'm starting a new project w/ the t3 stack and I'm looking to build a mobile app whats the difference between context and middlewareand which 1 should I use for express session cookies Axios, ExpressMiddleware and TRPCErrorsWe have an express based TRPC server and our procedures are calling our endpoints using axios. So wh base pathHi, don’t seem to be able to find documentation but is there a way to set the base path of the serve Any Benefit using tRPC for only remote api calls?Hi, does it make sense to use trpc if all I will be doing is calling a remote api? I have set it up Can I connect to a regular node express with socket.io?My idea is that I will host the socketio nodejs server in some server, and then use it with my nextj how does one actually make trpc/client work with the app routerive been using trpc on the pages router for a while now and ive started putting together a next13 st