skills.rest
guillempuche
guillempucheCOMMUNITY
Explore all skills by this author →
GitHub

compositions/router-query

Integrate TanStack Query as an external data cache for TanStack Router.

Updated Aug 27, 2026
Search Tags:#react#ssr#prefetch#tanstack-query#data-loading#tanstack-router#queryclient
One-click install
npx skills add https://github.com/guillempuche/engranatge --skill compositions-router-query-guillempuche
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compositions/router-query
Source: https://github.com/guillempuche/engranatge/tree/main/docs/repos/tanstack-router/packages/react-router/skills/compositions/router-query
Command: npx skills add https://github.com/guillempuche/engranatge --skill compositions-router-query-guillempuche

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers need to keep data fresh and coordinated when using TanStack Router together with TanStack Query, especially during server‑side rendering where a shared QueryClient can leak data between requests.

Core Features & Use Cases

  • Provide a per‑request QueryClient to isolate data per server request.
  • Disable the router’s preload cache by setting the default preload stale time to zero.
  • Use ensureQueryData in loaders to preload data before rendering.
  • Enable automatic SSR dehydration and hydration with the router‑SSR‑query integration package.
  • Allow streaming of non‑critical queries by prefetching without awaiting.
  • Handle errors in data loaders with query error reset boundaries.

Quick Start

Set up a TanStack Router that creates a fresh QueryClient for each request, disables the router preload cache, and calls ensureQueryData in every loader to fetch data before rendering.

Frequently Asked Questions about compositions/router-query

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

FAQPage Schema
How do I integrate TanStack Query with TanStack Router for server-side rendering?▼

To integrate TanStack Query with TanStack Router for SSR, create a fresh QueryClient per request, disable the router preload cache, and use ensureQueryData in loaders to fetch data before rendering.

Why does my TanStack Query data leak between server requests?▼

TanStack Query data leaks between server requests when a shared QueryClient is used. Providing a per-request QueryClient isolates data per server request, preventing cross-request state contamination.

How do I preload data before rendering with TanStack Router?▼

Preload data before rendering with TanStack Router by calling ensureQueryData in route loaders. Disable the router preload cache by setting the default preload stale time to zero to avoid stale data.

Can I stream non-critical queries during SSR with TanStack Query?▼

You can stream non-critical queries during SSR by prefetching queries without awaiting them in loaders. This allows the server to send HTML immediately while non-critical data loads in the background.

What is the best way to handle errors in TanStack Router data loaders?▼

Handle errors in TanStack Router data loaders by using query error reset boundaries. This manages exceptions thrown during data loading, allowing the application to recover gracefully from fetch failures.

Does TanStack Router support automatic SSR dehydration and hydration with TanStack Query?▼

TanStack Router enables automatic SSR dehydration and hydration with TanStack Query by using the router-SSR-query integration package, synchronizing server-fetched data to the client seamlessly.

Related Skills

Explore More Software Engineering Skills→
alexturpinalexturpin

tanstack-router

Generate file-based routes for React apps with TanStack Router.

Community
Intermediate
jcsoftdevjcsoftdev

progressive-hydration

Implements progressive hydration for SSR React apps using Suspense and code-splitting.

Community
Advanced
tenequmtenequm
32

tanstack-query

Manage React server-state with TanStack Query queries, mutations, and caching.

Community
Advanced
JamkrisJamkris
86

nuxt4-patterns

Standardize hydration-safe patterns and data fetching for Nuxt 4 SSR apps.

Community
Advanced