skills.rest
cenjie
cenjieCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-query-best-practices

Define TanStack Query best practices for caching, mutations, and SSR in React.

Updated May 17, 2026
Search Tags:#caching#mutations#ssr#react-query#tanstack-query#data-fetching#optimistic-updates
One-click install
npx skills add https://github.com/cenjie/skills --skill tanstack-query-best-practices-cenjie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query-best-practices
Source: https://github.com/cenjie/skills/tree/main/skills/tanstack-query
Command: npx skills add https://github.com/cenjie/skills --skill tanstack-query-best-practices-cenjie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Query Best Practices reduces cache bugs, redundant network requests, and UI inconsistencies caused by improper query key design, misconfigured caching, and incorrect mutation handling in React applications using TanStack Query.

Core Features & Use Cases

  • Query Key Discipline: Enforce array-based, hierarchical keys that include all dependencies and remain JSON-serializable to enable precise invalidation and avoid cache collisions.
  • Caching Strategies: Recommendations for staleTime, gcTime, default options, placeholderData vs initialData, and persistence for offline-first or fast-refresh experiences.
  • Mutations & Optimistic Updates: Patterns for onMutate snapshotting, rollback context, setQueryData updates, invalidate vs update trade-offs, and useMutationState for cross-component tracking.
  • SSR, Prefetching & Parallelism: Dehydrate/hydrate guidance, per-request QueryClient creation, intent-based prefetching, useQueries for dynamic parallel fetching, and infinite query pagination rules.
  • Performance & Resilience: Use select for transformations, structural sharing to limit re-renders, proper query cancellation with AbortSignal, and error boundary strategies with useQueryErrorResetBoundary. Use case: Apply these rules when building dashboards, paginated feeds, detail pages, or any data-driven UI that requires consistent server state and predictable cache behavior.

Quick Start

Review and standardize your query keys as arrays including all dependencies, configure sensible staleTime and gcTime values, add targeted invalidation and optimistic updates for mutations, and ensure fetch functions accept AbortSignal.

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 prevent cache inconsistencies and redundant network requests in React Query?▼

Prevent cache inconsistencies in React Query by enforcing hierarchical, JSON-serializable array-based query keys, configuring sensible staleTime and gcTime values, and applying targeted invalidation rules to avoid cache collisions and redundant fetching.

What is the best way to structure TanStack Query keys for precise cache invalidation?▼

The best way to structure TanStack Query keys is using hierarchical arrays that include all query dependencies. This array-based key convention enables precise cache invalidation and prevents cache collisions across your React application.

How do I implement optimistic updates with TanStack Query mutations?▼

Implement optimistic updates in TanStack Query by using onMutate snapshotting to capture rollback context, applying setQueryData updates, and choosing between direct cache updates or query invalidation based on your mutation state tracking needs.

Does TanStack Query work with SSR and prefetching in React applications?▼

TanStack Query works with SSR by using per-request QueryClient creation alongside dehydrate and hydrate guidance. It supports intent-based prefetching and dynamic parallel fetching with useQueries for server-rendered React applications.

Why does my TanStack Query UI re-render excessively after data fetching?▼

Excessive UI re-renders during data fetching often happen when transformations bypass the select option. Use select for data transformations and leverage structural sharing to limit re-renders and optimize React Query performance.

How do I handle request cancellation and error boundaries in TanStack Query?▼

Handle request cancellation in TanStack Query by ensuring fetch functions accept AbortSignal, and manage error boundaries using useQueryErrorResetBoundary to reset query errors and build resilient React data-fetching workflows.

Related Skills

Explore More Software Engineering Skills→
NextSpark-jsNextSpark-js

tanstack-query

Implement TanStack Query patterns for data fetching and caching in Next.js.

Official
Advanced
pedronauckpedronauck
567

tanstack-query-best-practices

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

Community
Advanced
aarsh21aarsh21
1

tanstack-query-best-practices

Codify TanStack Query best practices for React data fetching and caching.

Community
Advanced
Shreehari-AcharyaShreehari-Acharya

tanstack-query

Manage server-state data with caching, background updates, and optimistic mutations.

Community
Advanced