tanstack-query-best-practiceslisted

# TanStack Query Best Practices Comprehensive guidelines for implementing TanStack Query (React Query) patterns in React applications. These rules optimize data fetching, caching, mutations, and server state synchronization. ## When to Apply - Creating new data fetching logic - Setting up query configurations - Implementing mutations and optimistic updates - Configuring caching strategies - Integrating with SSR/SSG - Refactoring existing data fetching code ## Rule Categories by Priority | Priority | Category | Rules | Impact | |----------|----------|-------|--------| | CRITICAL | Query Keys | 5 rules | Prevents cache bugs and data inconsistencies | | CRITICAL | Caching | 5 rules | Optimizes performance and data freshness | | HIGH | Mutations | 6 rules | Ensures data integrity and UI consistency | | HIGH | Error Handling | 3 rules | Prevents poor user experiences | | MEDIUM | Prefetching | 4 rules | Improves perceived performance | | MEDIUM | Parallel Queries | 2 rules | Enables dynamic parallel fetching | | MEDIUM | Infinite Queries | 3 rules | Prevents pagination bugs | | MEDIUM | SSR Integration | 4 rules | Enables proper hydration | | LOW | Performance | 4 rules | Reduces unnecessary re-renders | | LOW | Offline Support | 2 rules | Enables offline-first patterns | ## Quick Reference ### Query Keys (Prefix: `qk-`) - `qk-array-structure` — Always use arrays for query keys - `qk-include-dependencies` — Include all variables the query depends on - `qk-hierarchical-orga