tanstack-query
Master server state management and data fetching with TanStack Query through expert guidelines covering query organization, mutations, caching strategies, and performance optimization. This skill teaches you how to structure queries with factory patterns, implement optimistic updates, handle errors gracefully, and prefetch data efficiently.
TanStack Query helps you manage server state, handle data fetching, and implement intelligent caching in React applications.
AI-generated summary based on this skill's SKILL.md
Install
Mindrally/skills/tanstack-query
git clone https://github.com/Mindrally/skills
cp -r skills/tanstack-query ~/.claude/skills/tanstack-queryFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are tanstack query best practices for server state management?
TanStack Query best practices emphasize treating server state separately from client state. Key practices include: organizing query keys with factory patterns for consistency, setting appropriate stale time and cache time values, using the query client for centralized cache management, implementing error boundaries for graceful error handling, and leveraging the DevTools for debugging. TanStack Query handles synchronization automatically, reducing boilerplate and keeping your UI in sync with server data.
How do you implement optimistic updates with TanStack Query mutations?
TanStack Query mutations support optimistic updates through the onMutate callback. Before the server responds, onMutate updates your cache with the expected result, providing instant UI feedback. If the mutation fails, use onError to roll back the cache to its previous state. This pattern improves perceived performance and user experience. Combine mutations with cache invalidation using queryClient.invalidateQueries() to ensure data consistency after successful updates.
How to use tanstack query for server state synchronization?
TanStack Query manages server state synchronization through automatic background refetching, stale-while-revalidate patterns, and cache invalidation. Configure staleTime to control when data is considered stale, and set gcTime (garbage collection time) for cache retention. Use useQuery for fetching, useMutation for updates, and queryClient.invalidateQueries() to trigger refetches. TanStack Query automatically deduplicates requests and handles race conditions, eliminating manual useEffect patterns.
What query key organization patterns does TanStack Query recommend?
TanStack Query recommends hierarchical query key factories for maintainability. Structure keys as arrays with logical grouping: ['users', userId, 'posts'] for nested resources. Create factory functions to generate keys consistently across your application, preventing typos and enabling bulk invalidation. This approach simplifies cache management, allows partial invalidation of related queries, and makes refactoring easier. Proper key organization is foundational to effective caching and synchronization strategies.
How does TanStack Query handle error states and prefetching?
TanStack Query provides built-in error handling through useQuery's error state and onError callbacks for mutations. Errors are cached and retried based on retry configuration. For performance, use queryClient.prefetchQuery() to load data before users navigate to it, or implement useInfiniteQuery for pagination with automatic prefetching. Combine prefetching with appropriate stale time settings to balance freshness and performance, reducing loading states and improving perceived responsiveness.
Can TanStack Query replace useEffect for data fetching patterns?
Yes, TanStack Query eliminates most useEffect data-fetching patterns. useQuery handles fetching, caching, synchronization, and refetching automatically. Instead of managing loading, error, and data states manually, useQuery provides these out-of-the-box. This reduces boilerplate, prevents common bugs like race conditions and memory leaks, and centralizes server state logic. TanStack Query's declarative approach makes components simpler and more maintainable than imperative useEffect patterns.
SKILL.md
rendered from the published skill — quoted content, verbatim
TanStack Query Best Practices
You are an expert in TanStack Query (formerly React Query), TypeScript, and React development. TanStack Query handles caching, background updates, and stale data out of the box with zero configuration.
Core Principles
- Use TanStack Query for all server state management and data fetching
- Minimize the use of
useEffectanduseStatefor server data; favor TanStack Query's built-in state management - Implement proper error handling with user-friendly messages
- Use TypeScript for full type safety with query responses
Project Structure
``` src/ api/ client.ts # API client configuration endpoints/ users.ts # User-related API calls posts.ts # Post-related API calls hooks/ queries/ useUsers.ts # User query hooks usePosts.ts # Post query hooks mutations/ useCreateUser.ts # User mutation hooks providers/ QueryProvider.tsx # Query client provider setup types/
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
tanstack-query/SKILL.md