tanstack-integration-best-practices▌
deckardger/tanstack-agent-skills · updated Apr 8, 2026
Architectural patterns for coordinating TanStack Query, Router, and Start across full-stack applications.
- ›Covers setup, data flow, caching, and SSR integration with 13 rules organized by priority and category
- ›Emphasizes loader-based data fetching with ensureQueryData, suspense queries in components, and server functions as query sources
- ›Provides unified caching and invalidation strategies to prevent duplication and ensure single source of truth
- ›Includes automatic SSR dehydration/h
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 contextsetup-provider-wrapping— Correctly wrap with QueryClientProvidersetup-stale-time-coordination— Coordinate staleTime between router and query
Data Flow (Prefix: flow-)
flow-loader-query-pattern— Use loaders with ensureQueryDataflow-suspense-query-component— Use useSuspenseQuery in componentsflow-mutations-invalidation— Coordinate mutations with query invalidationflow-server-functions-queries— Use server functions for query functions
Caching (Prefix: cache-)
cache-single-source— Let TanStack Query manage cachingcache-preload-coordination— Coordinate preloading between router and querycache-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 requestssr-streaming-queries— Handle streaming with queries
How to Use
Each rule file in the rules/ directory contains:
- Explanation — Why this pattern matters
- Bad Example — Anti-pattern to avoid
- Good Example — Recommended implementation
- Context — When to apply or skip this rule
Full Reference
See individual rule files in rules/ directory for detailed guidance and code examples.
Discussion
Product Hunt–style comments (not star reviews)- No comments yet — start the thread.
Ratings
4.6★★★★★62 reviews- ★★★★★Aarav Agarwal· Dec 28, 2024
tanstack-integration-best-practices is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
- ★★★★★Lucas Sethi· Dec 20, 2024
tanstack-integration-best-practices has been reliable in day-to-day use. Documentation quality is above average for community skills.
- ★★★★★Isabella Yang· Dec 4, 2024
Solid pick for teams standardizing on skills: tanstack-integration-best-practices is focused, and the summary matches what you get after install.
- ★★★★★Fatima Taylor· Nov 23, 2024
We added tanstack-integration-best-practices from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
- ★★★★★Yuki Lopez· Nov 19, 2024
tanstack-integration-best-practices reduced setup friction for our internal harness; good balance of opinion and flexibility.
- ★★★★★Hiroshi Dixit· Nov 11, 2024
I recommend tanstack-integration-best-practices for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
- ★★★★★Diego Ndlovu· Nov 11, 2024
tanstack-integration-best-practices fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
- ★★★★★Maya Brown· Nov 7, 2024
Useful defaults in tanstack-integration-best-practices — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
- ★★★★★Kaira Thompson· Oct 26, 2024
I recommend tanstack-integration-best-practices for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
- ★★★★★Dev Perez· Oct 14, 2024
tanstack-integration-best-practices fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
showing 1-10 of 62