Tanstack Query
This skill provides structured guidance on implementing TanStack Query patterns across React applications. It covers query key design, caching strategies, mutations, error handling, prefetching, infinite queries, SSR integration, and offline support through prioritized rules with code examples.
TanStack Query teaches you how to set up data fetching, caching, and server state management in React applications.
AI-generated summary based on this skill's SKILL.md
Install
DeckardGer/tanstack-agent-skills/tanstack-query
git clone https://github.com/DeckardGer/tanstack-agent-skills
cp -r tanstack-agent-skills ~/.claude/skills/tanstack-querygenerated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I set up and use Tanstack Query for data fetching?
Tanstack Query simplifies data fetching by managing server state automatically. Start by wrapping your app with QueryClientProvider and creating a QueryClient instance. Use the useQuery hook to fetch data by passing a query key (unique identifier) and a query function that returns a promise. Tanstack Query handles caching, background refetching, and synchronization out of the box, eliminating manual state management for server data.
What are the caching and synchronization mechanisms in Tanstack Query?
Tanstack Query employs intelligent caching through query keys and automatic background synchronization. Data is cached based on query keys and remains fresh according to staleTime settings. When staleTime expires, Tanstack Query marks data as stale but keeps it cached. On window focus or network reconnection, it automatically refetches stale data. You can configure gcTime (garbage collection time) to control how long inactive queries persist in cache.
How can I implement pagination and infinite queries with Tanstack Query?
Tanstack Query supports pagination through useQuery with page-based query keys that change when the page number updates. For infinite queries, use useInfiniteQuery with a getNextPageParam function that determines when more pages are available. This hook manages multiple pages of data in a single cache entry, providing hasNextPage and fetchNextPage utilities for seamless pagination without manual page state management.
How does Tanstack Query compare to alternative state management solutions?
Tanstack Query differs from general state managers like Redux by specializing in server state management. Unlike SWR, Tanstack Query offers more granular control through devtools, advanced caching strategies, and built-in pagination support. It separates server state from client state concerns, reducing boilerplate compared to Redux while providing superior synchronization features for data-heavy applications.
What best practices should I follow when using Tanstack Query?
Tanstack Query best practices include designing stable, hierarchical query keys for consistency; setting appropriate staleTime and gcTime values based on data volatility; using error boundaries and error handling callbacks; prefetching data before user interactions; implementing proper loading and error states; leveraging devtools for debugging; and using mutations with invalidateQueries to keep cache synchronized after updates.
How does Tanstack Query handle error handling and state management?
Tanstack Query provides comprehensive error handling through useQuery's error state, onError callbacks, and retry logic with exponential backoff. Errors are cached separately from data, allowing you to display error UI while retaining previous data. Use useMutation for server mutations with onSuccess and onError handlers. Combine with invalidateQueries to trigger refetches after mutations, maintaining consistent application state across server and client.