skillfed

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

182 14 MIT updated by pproenca

Install

pproenca/dot-skills/tanstack-query · repository language: Shell

CLI (skillfed)coming soon
git clone https://github.com/pproenca/dot-skills
cp -r dot-skills/skills/.curated/tanstack-query ~/.claude/skills/tanstack-query

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)

Read as markdown · JSON record · Browse the source repository

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

Related skills

Tags

data-fetching-library cache-management query-optimization async-state-handling request-deduplication performance-tuning client-side-caching mutation-handling react-data-layer