tanstack-integration-best-practices
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/hydration setup and per-request QueryClient patterns for server-side rendering
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
More from deckardger/tanstack-agent-skills
tanstack-start-best-practices
TanStack Start best practices for full-stack React applications. Server functions, middleware, SSR, authentication, and deployment patterns. Activate when building full-stack apps with TanStack Start.
5.9Ktanstack-query-best-practices
TanStack Query (React Query) best practices for data fetching, caching, mutations, and server state management. Activate when building data-driven React applications with server state.
5.7Ktanstack-router-best-practices
TanStack Router best practices for type-safe routing, data loading, search params, and navigation. Activate when building React applications with complex routing needs.
3.4K