compositions/router-query

Coordinate TanStack Router with TanStack Query for data fetching and caching during navigation.

Updated Apr 2, 2026

Search Tags:#ssr #hydration #tanstack-query #data-loading #tanstack-router #loader

Ready to run

npx skills add https://github.com/abereghici/skills --skill compositions-router-query-abereghici

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: compositions/router-query
Source: https://github.com/abereghici/skills/tree/main/vendor/tanstack-router/packages/react-router/skills/compositions/router-query
Command: npx skills add https://github.com/abereghici/skills --skill compositions-router-query-abereghici

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Coordinating TanStack Router with TanStack Query to manage data fetching, caching, and lifecycle during navigation.

Core Features & Use Cases

Data-coordination between router loaders and query cache to ensure up-to-date data during navigation
SSR integration with dehydration/hydration and streaming of in-flight queries
Flexible per-route data strategies using ensureQueryData, prefetchQuery, and context-based QueryClient

Quick Start

Create a per-request QueryClient and wrap your app with a QueryClientProvider inside your router setup to enable SSR hydration and seamless data caching.

Frequently Asked Questions about compositions/router-query

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I coordinate TanStack Router loaders with TanStack Query for data fetching?▼

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.

What is the best way to handle SSR hydration with TanStack Router and TanStack Query?▼

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.

How does router-triggered data loading work with TanStack Query caching?▼

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.

Do I need a per-request QueryClient for SSR data hydration in TanStack Router?▼

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.

Can I stream in-flight queries during SSR navigation using TanStack Router and Query?▼

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.

When should I use ensureQueryData vs prefetchQuery in TanStack Router loaders?▼

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.