skills.rest
JBonfim
JBonfimCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tanstack-query-best-practices

Implement TanStack Query best practices for React data fetching.

Updated May 15, 2026
Search Tags:#caching#react#ssr#tanstack-query#server-state#optimistic-updates#query-keys
One-click install
npx skills add https://github.com/JBonfim/skill-developer --skill tanstack-query-best-practices-jbonfim
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query-best-practices
Source: https://github.com/JBonfim/skill-developer/tree/main/.agents/skills/tanstack-query-best-practices
Command: npx skills add https://github.com/JBonfim/skill-developer --skill tanstack-query-best-practices-jbonfim

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Query patterns often drift into inconsistent query keys, incorrect cache timing, missing invalidation, and poor error/SSR handling, which causes stale UI, cache collisions, and hard-to-debug data-fetch behavior.

Core Features & Use Cases

  • Query key correctness: Ensures query keys are arrays, hierarchical, include all dependencies, and remain JSON-serializable to prevent cache bugs.
  • Caching and lifecycle tuning: Guides sensible staleTime and gcTime choices to balance freshness, memory, and user navigation patterns.
  • Mutation consistency: Provides rules for optimistic updates, rollback, loading state handling, and targeted invalidation of related queries.
  • Robust UX for errors and loading: Recommends error boundary integration via useQueryErrorResetBoundary and Suspense-compatible patterns.
  • Advanced fetching strategies: Covers prefetching, parallel queries (useQueries), infinite queries (getNextPageParam), cancellation, and SSR dehydration/hydration.

Quick Start

Use tanstack-query-best-practices when you are implementing data fetching in a React app using TanStack Query, and apply the relevant rules for query keys, caching, mutations, and error/SSR handling.

Frequently Asked Questions about tanstack-query-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure TanStack Query keys to prevent cache collisions?▼

TanStack Query keys must be deterministic, hierarchical, and JSON-serializable arrays containing all query dependencies. This structure ensures targeted cache invalidation and prevents server-state bugs caused by inconsistent query key mapping.

What is the best way to handle optimistic updates and rollback with TanStack mutations?▼

Optimistic updates in TanStack mutations require proper rollback logic on error, targeted invalidation of related queries, and careful loading state handling. This ensures mutation consistency and reliable UI behavior across server-state changes.

How do I tune staleTime and gcTime for React query caching?▼

Tuning staleTime and gcTime in TanStack Query balances data freshness, memory usage, and user navigation patterns. Sensible lifecycle parameters prevent stale UI and optimize cache retention for React server-state management.

Does TanStack Query work with React SSR hydration and Suspense?▼

TanStack Query supports React SSR dehydration and hydration workflows alongside Suspense-compatible patterns. Using useQueryErrorResetBoundary ensures robust error boundary integration and SSR-safe error handling for server-state queries.

How do I implement parallel and infinite queries in TanStack Query?▼

Parallel queries in TanStack Query use useQueries, while infinite queries require proper getNextPageParam implementation. Both strategies need correct cancellation handling to manage advanced fetching and prevent inconsistent UI behavior.

Related Skills

Explore More Software Engineering Skills→
MolcajeteAIMolcajeteAI
2

tanstack-query-setup

Configure TanStack Query with QueryClientProvider for React server state management.

Official
Intermediate
pedronauckpedronauck
567

tanstack-query-best-practices

Implement TanStack Query patterns for data fetching and caching in React applications.

Community
Advanced
OpenAEC-FoundationOpenAEC-Foundation
4

solid-errors-error-handling

Handle SolidJS rendering and reactive errors with ErrorBoundary and Suspense.

Official
Advanced
Yoriichi-DangYoriichi-Dang

tanstack-query-best-practices

Structure TanStack Query data fetching, caching, and server state in React applications.

Community
Advanced