tanstack-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.
Security Assessment
About tanstack-query-best-practices
The 'tanstack-query-best-practices' skill provides comprehensive guidelines for using TanStack Query (React Query) in React applications, focusing on efficient data fetching, caching, mutations, and server state management. It addresses common challenges in managing asynchronous server data by ensuring consistency, reducing bugs, and improving performance. By following these best practices, developers can prevent cache-related issues, handle errors gracefully, and implement robust patterns for optimistic updates and query invalidation.
This skill covers a wide range of features and capabilities including structured query key management, caching strategies, mutation handling, error boundaries, prefetching techniques, infinite queries, parallel queries, and SSR integration. Each category includes prioritized rules and specific actionable recommendations, such as using arrays for query keys, setting appropriate stale times, handling mutation rollback contexts, and leveraging hydration boundaries for server-side rendering. The skill emphasizes performance optimization, UI consistency, and maintaining accurate server state across components.
Target users include React developers building data-driven applications who need reliable patterns for managing server state, as well as teams refactoring existing data fetching logic or implementing SSR/SSG workflows. Use cases range from creating new query logic and configuring caching strategies to implementing prefetching for route transitions and managing infinite scrolls. This skill is ideal for developers seeking to streamline server state management while maintaining high-quality, maintainable code in React applications.
FAQ
How do I structure query keys according to best practices?
Always use arrays for query keys, include all dependencies, organize them hierarchically, and ensure all key parts are JSON-serializable. For complex applications, use query key factories.
Is this skill compatible with server-side rendering?
Yes, it includes guidance for SSR integration such as using dehydrate/hydrate patterns, creating a QueryClient per request, and setting higher stale times on the server.
Can I use these best practices for mutations?
Absolutely. The skill provides rules for invalidating related queries, implementing optimistic updates, handling errors, and managing mutation loading states across components.
Are there any limitations or requirements to apply these guidelines?
The guidelines are specific to React applications using TanStack Query. They assume familiarity with React hooks and server state management concepts.
How can I improve perceived performance using this skill?
By applying prefetching strategies on user intent or route transitions, configuring appropriate stale times, and using ensureQueryData for conditional prefetching.
All Files
22 filesInstall tanstack-query-best-practices
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
deckardger/tanstack-agent-skills