skills.rest
aashahin
aashahinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tanstack-integration-best-practices

Configure TanStack Query, Router, and Start integration with SSR hydration and caching patterns.

Updated Jun 22, 2026
Search Tags:#caching#react#tanstack start#data fetching#tanstack query#ssr#tanstack router
One-click install
npx skills add https://github.com/aashahin/ai-skills --skill tanstack-integration-best-practices-aashahin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-integration-best-practices
Source: https://github.com/aashahin/ai-skills/tree/main/tanstack-integration-best-practices
Command: npx skills add https://github.com/aashahin/ai-skills --skill tanstack-integration-best-practices-aashahin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-query, @tanstack/react-router, @tanstack/react-router-ssr-query, and includes references (resource) components.

What problem does it solve? Integrating TanStack Query with TanStack Router and TanStack Start introduces tricky coordination problems: duplicate caches, SSR dehydration mismatches, loading waterfalls, and unclear data flow ownership. This Skill provides prioritized, rule-based guidance so your full-stack React app has a single source of truth for caching and correct SSR hydration. ## Core Features & Use Cases - Setup Rules: Pass QueryClient through router context, wrap providers correctly, and coordinate staleTime between router and query. - Data Flow Patterns: Combine route loaders with ensureQueryData and useSuspenseQuery to eliminate loading waterfalls and enable hover preloading. - SSR Integration: Use setupRouterSsrQueryIntegration from @tanstack/react-router-ssr-query for automatic dehydration/hydration, streaming, and redirect handling. - Use Case: When building a TanStack Start application, apply these rules to create a per-request QueryClient, prefetch data in loaders, and let Query manage all caching while the router handles navigation. ## Quick Start Ask the AI to review your TanStack Start router setup and apply the integration rules for QueryClient context, loader-based prefetching, and SSR 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?▼

Pass the QueryClient through the router's context using createRootRouteWithContext, then call queryClient.ensureQueryData in route loaders and useSuspenseQuery in components. This gives type-safe access in loaders and eliminates loading waterfalls.

How do I set up SSR with TanStack Query and TanStack Start?▼

Use setupRouterSsrQueryIntegration from @tanstack/react-router-ssr-query to handle dehydration and hydration automatically. Create a fresh QueryClient per request inside getRouter(), and the Vite plugin manages SSR entry points without manual client or server files.

Should I use TanStack Router's cache or TanStack Query's cache?▼

Let TanStack Query be the single source of truth for caching by setting defaultPreloadStaleTime to 0 on the router. Query provides invalidation, background refetching, optimistic updates, and DevTools that the router cache lacks.

Why is a global QueryClient a problem in TanStack Start?▼

A global QueryClient singleton breaks SSR because state leaks between requests and makes testing harder. Creating the client per request inside getRouter() and passing it through router context enables proper isolation and dependency injection.

How do I avoid loading waterfalls with TanStack Router loaders?▼

Prefetch data in the route loader with queryClient.ensureQueryData so fetching starts during navigation, then read it with useSuspenseQuery in the component. You can also run multiple ensureQueryData calls in parallel with Promise.all for dashboard-style pages.

Related Skills

Explore More Software Engineering Skills→
mathfalconmathfalcon

tanstack-react-router_installation

Install and configure TanStack Router for file-based routing in React projects.

Community
Basic
fellipeutakafellipeutaka
33

tanstack-start

Provide architecture standards for full-stack React applications with TanStack Start.

Community
Advanced
fusenginefusengine
1

start-routing-data

Implement isomorphic loaders, Query prefetching, selective SSR, and mutations in TanStack Start routes.

Community
Advanced
retrip-airetrip-ai
2

tanstack-comprehensive

Implement Tanstack Start routing with loaders, queries, and tRPC integration.

Official
Advanced