Tanstack Integration Best Practices

If you're wiring up TanStack Query with Router and Start, this gives you the architectural patterns to avoid the common pitfalls. It covers the critical setup pieces like passing QueryClient through router context and the SSR integration with dehydrate/hydrate, then moves into data flow patterns like using loaders with ensureQueryData and coordinating mutations with invalidation. The caching guidance is solid: let Query handle the cache, don't fight it with router-level caching. What's useful here is the priority system. The three critical setup rules and the SSR integration rule are genuinely foundational. Get those wrong and you'll spend hours debugging hydration mismatches and stale data issues.

skills.sh installs: 3K
GitHub stars: 230
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add deckardger/tanstack-agent-skills --skill tanstack-integration-best-practices --agent claude-code

Installs into .claude/skills of the current project.

Files

TanStack Integration Best Practices

Guidelines for integrating TanStack Query, Router, and Start together effectively. These patterns ensure optimal data flow, caching coordination, and type safety across the stack.

When to Apply

Setting up a new TanStack Start project
Integrating TanStack Query with TanStack Router
Configuring SSR with query hydration
Coordinating caching between router and query
Setting up type-safe data fetching patterns

Rule Categories by Priority

Priority	Category	Rules	Impact
CRITICAL	Setup	3 rules	Foundational configuration
CRITICAL	SSR Integration	1 rule	Router + Query SSR setup
HIGH	Data Flow	4 rules	Correct data fetching patterns
MEDIUM	Caching	3 rules	Performance optimization
MEDIUM	SSR	2 rules	Additional SSR patterns