compositions/router-query

To coordinate TanStack Router loaders with TanStack Query, you back loader data with Query's cache, attach a QueryClient to the router context, and use ensureQueryData with useSuspenseQuery to handle automatic dehydration and hydration across server and client.

Isolating QueryClient data per-request in SSR requires instantiating a new QueryClient for each request and attaching it to the router context, ensuring server-side query caches do not bleed between users before dehydration and client hydration.

Yes, TanStack Router works with useSuspenseQuery by allowing route components to subscribe directly to the centralized Query cache, rendering data synchronously when available and triggering suspense boundaries only when cache is missing.

Streaming SSR route data with TanStack Query involves using the router loader to ensureQueryData on the server, automatically dehydrating the query state, and hydrating it on the client as the stream arrives to maintain cache synchronization.

Yes, you can cache route loader data in TanStack Query by calling ensureQueryData inside the router loader function, centralizing the data cache in Query and allowing route components to read from it via useSuspenseQuery.

TanStack Router SSR setups lose query data during hydration if the server-side QueryClient state is not properly dehydrated and passed to the client, requiring you to attach the QueryClient to the router context for automatic state synchronization.