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})
schlabach
schlabach329d ago
Has anyone been able to figure this out?
.traevelliath
.traevelliath326d 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
schlabach326d 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
.traevelliath325d ago
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.
More 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 mutatuseQuery 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 resuUsing 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 cookiesAxios, ExpressMiddleware and TRPCErrorsWe have an express based TRPC server and our procedures are calling our endpoints using axios. So whbase pathHi, don’t seem to be able to find documentation but is there a way to set the base path of the serveAny 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 nextjhow 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