skills.rest
TaherMustansir1929
TaherMustansir1929COMMUNITY
Explore all skills by this author →
WebsiteGitHub

tanstack-integration-best-practices

Integrate TanStack Query with TanStack Router for SSR data transfer.

Updated Apr 4, 2026
Search Tags:#caching#loaders#ssr#hydration#tanstack-query#tanstack-router#queryclient
One-click install
npx skills add https://github.com/TaherMustansir1929/zainy-water-v3 --skill tanstack-integration-best-practices-tahermustansir1929
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-integration-best-practices
Source: https://github.com/TaherMustansir1929/zainy-water-v3/tree/main/.agents/skills/tanstack-integration-best-practices
Command: npx skills add https://github.com/TaherMustansir1929/zainy-water-v3 --skill tanstack-integration-best-practices-tahermustansir1929

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide removes ambiguity and fragile patterns when combining TanStack Query with TanStack Router and TanStack Start by prescribing how to coordinate caching, loaders, SSR hydration, and type-safe data fetching so applications avoid duplicate caches, loading waterfalls, and broken SSR hydration.

Core Features & Use Cases

  • Router + Query Context: Pass a per-request QueryClient through the router context to enable SSR, testing, and type-safe loader access.
  • Loader + ensureQueryData Pattern: Use loaders to prefetch via ensureQueryData so components can use useSuspenseQuery without loading waterfalls.
  • Caching Coordination: Disable router cache (defaultPreloadStaleTime: 0) and let QueryClient manage staleTime, gcTime, and invalidation.
  • SSR Dehydrate/Hydrate: Integrate setupRouterSsrQueryIntegration to automate dehydration, streaming, redirects, and client hydration.
  • Use Case: Preload multiple queries in parallel for dashboards, ensure detail pages are fully cached before render, and perform mutation invalidation that reliably updates route state.

Quick Start

Configure your getRouter() to create a per-request QueryClient, pass it via router context, set defaultPreloadStaleTime to 0, and call setupRouterSsrQueryIntegration to enable automatic SSR dehydration and hydration.

Frequently Asked Questions about tanstack-integration-best-practices

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

FAQPage Schema
How do I integrate TanStack Query with TanStack Router for SSR data fetching?▼

To integrate TanStack Query with TanStack Router for SSR, pass a per-request QueryClient through router context and use setupRouterSsrQueryIntegration to automate dehydration and hydration during server-side renders.

Why does my TanStack Router preload cause duplicate TanStack Query caches?▼

Duplicate TanStack Query caches during TanStack Router preloads occur when router caching overlaps with QueryClient caching. Set defaultPreloadStaleTime to 0 to disable router cache and let QueryClient manage staleTime and gcTime.

How do I prevent loading waterfalls when using TanStack Router loaders?▼

To prevent loading waterfalls in TanStack Router loaders, use ensureQueryData to prefetch data so components can safely use useSuspenseQuery without blocking the render cycle.

What is the best way to pass a QueryClient through TanStack Router context?▼

The best way to pass a QueryClient through TanStack Router context is creating a per-request instance inside getRouter, enabling type-safe loader access, reliable testing, and consistent server-side rendering.

Does TanStack Start support automatic dehydration and hydration for TanStack Query?▼

Yes, TanStack Start supports automatic dehydration and hydration for TanStack Query by calling setupRouterSsrQueryIntegration, which handles streaming, redirects, and client cache hydration automatically.

Can I preload multiple TanStack Query requests in parallel for dashboard routes?▼

Yes, you can preload multiple TanStack Query requests in parallel for dashboard routes by batching ensureQueryData calls inside TanStack Router loaders to fully cache data before component render.

Related Skills

Explore More Software Engineering Skills→
wanghaishengwanghaisheng
10

tanstack-integration-best-practices

Define TanStack Query, Router, and Start integration patterns for SSR hydration.

Community
Advanced
awardsappawardsapp

building-settings-ui

Standardize Tambo Cloud settings sections across Agent and Settings tabs.

Official
Intermediate
cenjiecenjie

tanstack-integration-best-practices

Integrate TanStack Query with TanStack Router for SSR-safe data fetching and caching.

Community
Advanced
cenjiecenjie

tanstack-query-best-practices

Define TanStack Query best practices for caching, mutations, and SSR in React.

Community
Advanced