What problem does it solve? Coordinating TanStack Query's cache with TanStack Router's loader system is error-prone: Router's built-in preload cache can serve stale data, module-level QueryClient singletons leak data between SSR requests, and misused prefetch calls block navigation. This Skill provides the correct integration patterns. ## Core Features & Use Cases - Router Context Setup: Inject QueryClient into router context via createRootRouteWithContext, with SSR-safe per-request QueryClient creation inside the createRouter factory. - Loader + Component Pattern: Use ensureQueryData in loaders with useSuspenseQuery in components so data is cached before render without loading flashes, plus prefetchQuery for non-blocking streaming of non-critical data. - SSR Dehydration/Hydration: Configure setupRouterSsrQueryIntegration for automatic dehydration, hydration, streaming, and redirect handling, or wire dehydrate/hydrate manually. - Use Case: Building a TanStack Start dashboard where critical user data blocks navigation via ensureQueryData while analytics stream in via prefetchQuery, with QueryClient isolated per server request. ## Quick Start Set up TanStack Query with my TanStack Router app so loaders prefetch data and SSR hydration works correctly.
