tanstack-query
TanStack Query Best Practices provides 40 prioritized rules across 8 categories to optimize data fetching, caching strategies, and query patterns in v5 applications. Covers query key structure, cache configuration, mutation handling, prefetching, infinite queries, Suspense integration, error handling, and render optimization.
TanStack Query Best Practices guides performance optimization through 40 rules spanning caching, query keys, mutations, and prefetching.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-24
TanStack Query Best Practices guides performance optimization through 40 rules spanning caching, query keys, mutations, and prefetching. TanStack Query Best Practices provides 40 prioritized rules across 8 categories to optimize data fetching, caching strategies, and query patterns in v5 applications. Covers query key structure, cache configuration, mutation handling, prefetching, infinite queries, Suspense integration, error handling, and render optimization.
Use it when
- TanStack Query Best Practices covers cache configuration through query key structure and timing settings.
- TanStack Query Best Practices addresses prefetching with queryClient prefetch patterns that load data before components request it.
Verify before relying
Read SKILL.md below before installing (45 files). Open directory: indexed for reading, not audited.
Install
pproenca/dot-skills/tanstack-query · repository language: Shell
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are the best practices for optimizing TanStack Query performance?
TanStack Query Best Practices recommends 40 prioritized rules across 8 categories. Key optimization strategies include proper query key structure, configuring staleTime and gcTime for effective caching, implementing prefetching to avoid request waterfalls, using useQuery and useMutation patterns correctly, and optimizing renders through selective subscriptions. The guide emphasizes cache configuration as foundational to performance gains.
How should TanStack Query caching strategies be configured correctly?
TanStack Query Best Practices covers cache configuration through query key structure and timing settings. Proper query keys enable automatic cache invalidation and deduplication. Configure staleTime to control when data is considered fresh, and gcTime (formerly cacheTime) to determine how long inactive queries persist. These settings work together to balance data freshness with memory efficiency and network requests.
What prefetching patterns does TanStack Query recommend to avoid waterfalls?
TanStack Query Best Practices addresses prefetching with queryClient prefetch patterns that load data before components request it. This eliminates request waterfalls where child components wait for parent data. Prefetch strategically during user interactions or route transitions. The guide provides specific patterns for timing and triggering prefetch calls to maximize performance without over-fetching.
What are TanStack Query mutation best practices and data invalidation patterns?
TanStack Query Best Practices emphasizes mutations should trigger precise query invalidation rather than broad cache clears. Use optimistic updates to improve perceived performance, then validate server responses. Structure invalidation patterns around your query key hierarchy. Handle mutation errors gracefully with rollback strategies. The guide details when to use useMutation hooks and how to coordinate mutations with query state.
How does TanStack Query handle infinite queries and request optimization?
TanStack Query Best Practices covers infinite queries for paginated or load-more patterns. Configure proper query keys to distinguish pages, use getNextPageParam to determine pagination logic, and manage memory by setting appropriate gcTime values. The guide addresses render optimization techniques and error handling specific to infinite query scenarios.
How can Suspense and error boundaries integrate with TanStack Query?
TanStack Query Best Practices provides guidance on integrating Suspense for loading states and error boundaries for error handling. Configure queries with appropriate retry settings and error states. The guide covers how to structure components to work with Suspense boundaries and handle both query errors and mutation failures through error boundary integration.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
TanStack Query Best Practices
Comprehensive performance optimization guide for TanStack Query v5 applications. Contains 40 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
When to Apply
Reference these guidelines when: - Writing new queries, mutations, or data fetching logic - Implementing caching strategies (staleTime, gcTime) - Reviewing code for performance issues or request waterfalls - Refactoring existing TanStack Query code - Implementing infinite queries, Suspense, or optimistic updates
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Query Key Structure | CRITICAL | tquery- |
| 2 |
(truncated - see the full file via the links below)
File tree — 15 files
skills/.curated/tanstack-query/AGENTS.md
skills/.curated/tanstack-query/README.md
skills/.curated/tanstack-query/SKILL.md
skills/.curated/tanstack-query/metadata.json
skills/.curated/tanstack-query/references/_sections.md
skills/.curated/tanstack-query/references/cache-enabled-option.md
skills/.curated/tanstack-query/references/cache-global-defaults.md
skills/.curated/tanstack-query/references/cache-invalidation-precision.md
skills/.curated/tanstack-query/references/cache-placeholder-vs-initial.md
skills/.curated/tanstack-query/references/cache-refetch-triggers.md
skills/.curated/tanstack-query/references/cache-staletime-gctime.md
skills/.curated/tanstack-query/references/error-conditional-retry.md
skills/.curated/tanstack-query/references/error-display-patterns.md
skills/.curated/tanstack-query/references/error-global-handler.md
skills/.curated/tanstack-query/references/error-retry-config.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Optimize TanStack Query performance with caching and query patterns”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
TanStack Query v5 handles server state management in React through data fetching, caching, and mutation patterns. Learn QueryClient setup, hook usage with the v5 object syntax, and common migration issues from v4.
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 provides asynchronous state management for server data across React, Vue, Solid, Svelte, and Angular. It handles caching, background synchronization, pagination, infinite scrolling, and optimistic updates automatically. Use queries for data fetching and mutations for server modifications, with lifecycle hooks for managing side effects and rollback scenarios.
TanStack Query is an async state manager that handles server data fetching, caching, and synchronization in React applications. It automates cache invalidation, deduplication, background updates, and stale data management—you supply a queryFn that returns a Promise, and the library handles the rest. Use it for infinite scrolling, offline-first apps, complex cache strategies, and hybrid server/client architectures.
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 handles server-state fetching and caching in React applications, automating data synchronization and eliminating manual boilerplate. It provides built-in background refetching, optimistic mutations, intelligent cache invalidation, and pagination support for complex data workflows.
More skills state-management (MIT)