TanStack Query Best Practices

TanStack Query (formerly React Query) handles server-state caching, background updates, and stale-data management out of the box. This skill covers v5 patterns and APIs — v5 introduced several breaking changes from v4 that older examples online still don't reflect.

Core Principles

• Use TanStack Query for all server state management and data fetching; it is not a general client-state manager — keep client-only state in useState/context/a state library instead
• Minimize useEffect and useState for server data; favor TanStack Query's built-in state management
• Every query needs a stable, serializable query key that uniquely describes the data it holds
• Mutations handle writes; queries handle reads — don't blur this boundary
• Implement proper error handling with user-friendly messages
• Use TypeScript for full type safety with query responses

v5 Breaking Changes to Watch For

If you see or write any of these v4 patterns, update them: