tanstack-integration-best-practices

Coordinate TanStack Query, Router, and Start integration for SSR hydration and centralized caching.

5|Updated Feb 6, 2022

Search Tags:#caching #tanstack #ssr #react-query #data-fetching #react-router

Ready to run

npx skills add https://github.com/christofferbergj/dotfiles --skill tanstack-integration-best-practices-christofferbergj

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tanstack-integration-best-practices
Source: https://github.com/christofferbergj/dotfiles/tree/main/.agents/skills/tanstack-integration-best-practices
Command: npx skills add https://github.com/christofferbergj/dotfiles --skill tanstack-integration-best-practices-christofferbergj

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide consolidates best practices for integrating TanStack Query with TanStack Router and TanStack Start, helping teams implement consistent data flow, SSR hydration, and caching strategies across the stack.

Core Features & Use Cases

Standardized patterns for wiring per-request QueryClient instances into router context and SSR hydration.
Clear guidance on loader and suspense patterns, data fetching coordination, and cache invalidation.
Real-world use cases across new TanStack Start projects, SSR-enabled pages, and multi-route data coordination.

Quick Start

Provide a starter router setup that wires a per-request QueryClient, SSR hydration, and coordinated caching across loaders and components.

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 configure per-request QueryClient instances for TanStack Start SSR hydration?▼

Setting up TanStack Query SSR hydration involves dehydrating the query cache on the server and rehydrating it on the client. This guide provides standardized patterns for wiring per-request QueryClient instances into router context to ensure consistent data flow.

What is the best way to coordinate data fetching between TanStack Router loaders and React Query?▼

The best way to coordinate data fetching between TanStack Router and React Query is to use rule-based loader patterns. This guide offers clear guidance on fetching within loaders, managing suspense patterns, and synchronizing cache invalidation across multi-route scenarios.

How do I handle centralized caching and cache invalidation across complex TanStack Router scenarios?▼

Centralized caching and cache invalidation across complex TanStack Router scenarios are handled by enforcing consistent data flow patterns. This guide outlines strategies for coordinating cache invalidation and managing data fetching across multiple routes and components.

Does this guide apply to existing React projects or only new TanStack Start setups?▼

This guide applies primarily to new TanStack Start projects, SSR setups, and complex routing scenarios. It focuses on standardizing patterns for wiring QueryClient instances, SSR hydration, and coordinated caching across the stack for these specific use cases.

Why do I need a per-request QueryClient when setting up TanStack Query with SSR?▼

A per-request QueryClient is needed in TanStack Query SSR setups to ensure isolated cache state for each user. Using a shared client can leak sensitive data between requests, so standardizing per-request instances prevents cross-request data contamination.