compositions/router-query

You coordinate TanStack Router loaders with TanStack Query by applying per-route data strategies like ensureQueryData or prefetchQuery. This lets the router trigger data loads during navigation while Query manages the cache and background updates.

The best way to handle SSR hydration is to use setupRouterSsrQueryIntegration. It manages dehydration and hydration of query data, supports streaming in-flight queries, and ensures a per-request QueryClient context.

Router-triggered data loading works by having the router invoke loaders during navigation, which then use TanStack Query's ensureQueryData or prefetchQuery. Query manages the cache lifecycle and background updates so data stays current.

Yes, you need a per-request QueryClient for SSR data hydration. Wrapping your app with a QueryClientProvider inside your router setup ensures proper SSR hydration and seamless data caching without leaking state across requests.

Yes, you can stream in-flight queries during SSR. The integration supports streaming scenarios via setupRouterSsrQueryIntegration, allowing the router to trigger data loads while Query manages cache and background updates.

Use ensureQueryData when you need to block navigation until data is loaded, and prefetchQuery to fetch data in the background without blocking. Both strategies integrate with TanStack Query to keep the cache updated during navigation.