Dehydrating/hydrating queryClient
How can i properly "hand off" the queryClient to the client, using TanStack Start with
ssr: "data-only"?
Currently I don't do any hydration. This means I'm fetching data first on the server, then I throw it all away and fetch everything again on the client, completely negating any benefits of running the loader on the server.
I've read some docs:
https://tanstack.com/query/v5/docs/framework/react/guides/ssr
https://tanstack.com/query/v5/docs/framework/react/guides/advanced-ssr
and I see that with document SSR you can use <HydrationBoundary>, hydrate() and dehydrate(). As I understand it, you dehydrate the queryClient on the server, then later hydrate the queryClient on the client. And it's not really one single query client instance across the server and client - first a queryClient (unique to each request) is made on the server, then it is filled with data using await queryClient.prefetchQuery(). But this is where I fall off. I populate the queryClient with data on the server, but how is the prefetched data communicated to the client?Server Rendering & Hydration | TanStack Query React Docs
In this guide you'll learn how to use React Query with server rendering. See the guide on for some background. You might also want to check out the before that. For advanced server rendering patterns,...
Advanced Server Rendering | TanStack Query React Docs
Welcome to the Advanced Server Rendering guide, where you will learn all about using React Query with streaming, Server Components and the Next.js app router. You might want to read the before this on...
4 Replies
like-gold•4w ago
There is an undocumented package that you should use, see the example
https://tanstack.com/start/latest/docs/framework/react/examples/start-basic-react-query?path=examples%2Freact%2Fstart-basic-react-query%2Fsrc%2Frouter.tsx
React TanStack Start Start Basic React Query Example | TanStack Sta...
An example showing how to implement Start Basic React Query in React using TanStack Start.
like-gold•4w ago
with that, you shouldn't need to handle any handovers
rival-blackOP•4w ago
Thanks a lot for the info, I'm gonna try this out when i get back on my pc in a couple hours 😎
equal-aqua•4w ago
fyi this package will soon be renamed and documented 😆