skills.rest
aidanaden
aidanadenCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-query-best-practices

Enforce TanStack Query patterns for fetching, caching, and server-state synchronization in React apps.

Updated Feb 17, 2026
Search Tags:#caching#tanstack#react-query#invalidation#data-fetching#server-state#optimistic-updates
One-click install
npx skills add https://github.com/aidanaden/sg-food-guide --skill tanstack-query-best-practices-aidanaden
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query-best-practices
Source: https://github.com/aidanaden/sg-food-guide/tree/main/.agents/skills/tanstack-query
Command: npx skills add https://github.com/aidanaden/sg-food-guide --skill tanstack-query-best-practices-aidanaden

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Query best practices enable teams to build data-driven React apps with consistent patterns for fetching, caching, mutations, and server-state synchronization, reducing bugs and maintenance overhead.

Core Features & Use Cases

  • Standardized query keys and caching strategies to prevent stale data and cache-busting issues.
  • Structured mutation flows with targeted invalidation, optimistic updates, and error handling.
  • Guidance for SSR/SSG hydration, suspense, error boundaries, and offline-first patterns to improve reliability.
  • Reusable rule-based guidance and factories to promote consistency across large apps.

Quick Start

Apply these guidelines by establishing a rules directory, adopting key-convention patterns, and wiring SSR/invalidation strategies in your React project.

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 standardize TanStack Query keys to prevent stale data and cache-busting issues?▼

Structure TanStack Query mutation flows by implementing targeted invalidation, optimistic updates, and robust error handling. This ensures reliable server-state synchronization and predictable data updates during React app mutations.

What is the best way to handle server-state synchronization in React apps?▼

Integrate TanStack Query with SSR by implementing hydration strategies, suspense, and error boundaries. These patterns ensure reliable server-side rendering and offline-first data fetching for React applications.

Does this TanStack Query guidance cover offline patterns and error boundaries?▼

Yes, this guidance covers offline-first patterns, error boundaries, and SSR hydration. It provides structured rules to improve reliability and manage server-state synchronization during network interruptions in React apps.

How do I structure TanStack Query mutation flows with targeted invalidation?▼

Structure TanStack Query mutation flows by implementing targeted invalidation, optimistic updates, and robust error handling. This ensures reliable server-state synchronization and predictable data updates during React app mutations.

Related Skills

Explore More Software Engineering Skills→
Fr-e-dFr-e-d
157

architecture-extract

Analyze project directory structures to generate architectural summaries.

Community
Basic
jcsoftdevjcsoftdev

progressive-hydration

Implements progressive hydration for SSR React apps using Suspense and code-splitting.

Community
Advanced
markhamsquareventuresmarkhamsquareventures

inertia

Integrate Link and Form components for React-based Laravel Inertia navigation and handling.

Official
Intermediate
oakossoakoss
1

tanstack-query

Manage React server state with TanStack Query caching and background updates.

Official
Advanced