skills.rest
ByeongminLee
ByeongminLeeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tanstack-query-best-practices

Implement consistent TanStack Query patterns for data fetching, caching, and server state in React apps.

2|1|Updated Mar 16, 2026
Search Tags:#caching#patterns#ssr#react-query#invalidation#tanstack-query#data-fetching
One-click install
npx skills add https://github.com/ByeongminLee/nextjs-claude-code --skill tanstack-query-best-practices-byeongminlee
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query-best-practices
Source: https://github.com/ByeongminLee/nextjs-claude-code/tree/main/template/skills-archive/tanstack-query-best-practices
Command: npx skills add https://github.com/ByeongminLee/nextjs-claude-code --skill tanstack-query-best-practices-byeongminlee

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Query best practices provide a structured, repeatable approach to data fetching, caching, and server state management in React applications, reducing bugs and inconsistent behavior.

Core Features & Use Cases

  • Patterns for query keys, hierarchical organization, and dependencies to ensure reliable caching and invalidation.
  • Standardized caching, staleTime, prefetching, SSR integration, and error handling to improve UX and performance.
  • Real-world use cases across lists, detail views, mutations, and optimistic updates with safe, production-ready guidance.

Quick Start

Apply the documented rules to your codebase to align data fetching with best practices.

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 for reliable caching and invalidation?▼

TanStack Query keys should follow a hierarchical structure with consistent dependencies to ensure reliable caching and precise invalidation across React application features. This prevents stale data bugs and simplifies cache management.

What is the best way to configure staleTime and caching strategies in React Query?▼

Standardize staleTime and caching strategies across your React app to control data freshness and improve UX. Consistent rules reduce inconsistent fetching behavior and optimize overall performance.

How do I handle mutations and optimistic updates with TanStack Query?▼

Use production-ready TanStack Query patterns to safely handle mutations and optimistic updates in list and detail views. This ensures reliable server state management and immediate UI feedback without breaking data consistency.

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

TanStack Query supports SSR integration and prefetching in React apps through standardized rules for server-side data fetching and hydration. This approach improves initial load performance and overall user experience.

Why does my TanStack Query invalidation not refresh data correctly?▼

TanStack Query invalidation fails to refresh data correctly when query keys lack hierarchical organization or dependencies are mismatched. Applying standardized key structures ensures invalidation targets the right cache entries reliably.

Related Skills

Explore More Software Engineering Skills→
masanao-ohbamasanao-ohba
2

react-query-patterns

Automate TanStack React Query server state patterns in TypeScript React projects.

Community
Intermediate
Yoriichi-DangYoriichi-Dang

tanstack-query-best-practices

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

Community
Advanced
ggombeeggombee
13

jotai-tanstack

Manage React state with Jotai atoms and TanStack Query.

Community
Advanced
joabgonzalezjoabgonzalez
7

redux-toolkit

Configure Redux stores with slices, thunks, and typed hooks.

Community
Advanced