Agent skill · software engineering · deckardger
tanstack-integration-best-practices
Best practices for integrating TanStack Query with TanStack Router and TanStack Start. Patterns for full-stack data flow, SSR, and caching coordination.
Why this skill is useful
Provides specific integration patterns and caching strategies for TanStack Query and Router that the AI wouldn't reliably generate on its own.
What it needs
About 1k tokens when loaded. Last updated 2026-04-03. 205 stars on the source repository.
What this skill does
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 Quick Reference Setup (Prefix: setup-) setup-query-client-context — Pass QueryClient through router context setup-provider-wrapping — Correctly wrap with QueryClientProvider setup-stale-time-coordination — Coordinate staleTime between router and query Data Flow (Prefix: flow-) flow-loader-query-pattern — Use loaders with ensureQueryData flow-suspense-query-component — Use useSuspenseQuery in components flow-mutations-invalidation — Coordinate mutations with query invalidation flow-server-functions-queries — Use server functions for query functions Caching (Prefix: cache-) cache-single-source — Let TanStack Query manage caching cache-preload-coordination — Coordinate preloading between router and query cache-invalidation-patterns — Unified invalidation patterns SSR Integration (Prefix: ssr-) ssr-dehydrate-hydrate — Use setupRouterSsrQueryIntegration for automatic SSR Additional SSR (Prefix: ssr-) ssr-per-request-client — Create QueryClient per request ssr-streaming-queries — Handle streaming with queries How to Use Each rule file in the rules/ directory contains: 1. Explanation — Why this pattern matters 2. Bad Example — Anti-pattern to avoid 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills deckardger/tanstack-integration