skills.rest
Yoriichi-Dang
Yoriichi-DangCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-query-best-practices

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

Updated Dec 26, 2025
Search Tags:#caching#tanstack#mutations#ssr#react-query#data-fetching#server-state
One-click install
npx skills add https://github.com/Yoriichi-Dang/dashboard_web_template --skill tanstack-query-best-practices
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query-best-practices
Source: https://github.com/Yoriichi-Dang/dashboard_web_template/tree/main/.agents/skills/tanstack-query-best-practices
Command: npx skills add https://github.com/Yoriichi-Dang/dashboard_web_template --skill tanstack-query-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill consolidates TanStack Query best practices for structuring data fetching, caching, and server state management in React applications.

Core Features & Use Cases

  • Query Keys & Caching: Design safe, hierarchical, and serializable keys to enable precise cache invalidation and data retrieval.
  • Mutations & Invalidation: Best practices for updating data and refreshing dependent queries to keep UI in sync.
  • SSR/CSR Hydration: Strategies for hydration and de-duplication across client/server boundaries.
  • Error Handling & SSR: Techniques for error boundaries and graceful failure recovery.
  • Use cases: data-heavy UIs in dashboards and analytics.

Quick Start

Install TanStack Query, configure a QueryClient, and implement basic fetching with useQuery and useMutation.

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 precise cache invalidation?▼

TanStack Query keys should be designed as safe, hierarchical, and serializable arrays to enable precise cache invalidation and targeted data retrieval across multiple dependent queries.

What is the best way to handle optimistic updates with React Query mutations?▼

Optimistic updates with React Query mutations involve applying best practices for updating data and refreshing dependent queries to keep the UI in sync with server state.

How does TanStack Query handle SSR hydration and client-side de-duplication?▼

TanStack Query handles SSR hydration by applying specific strategies for hydration and de-duplication across client and server boundaries to maintain consistent server state.

Can I use TanStack Query for data-heavy dashboards and analytics apps?▼

Yes, TanStack Query is suited for data-heavy UIs in dashboards and analytics, providing patterns for prefetching, error handling, and performance optimizations to manage server state.

Why do I need error boundaries for server state fetching in React?▼

Error boundaries for server state fetching in React are needed to implement techniques for graceful failure recovery and robust error handling during data fetching operations.

Related Skills

Explore More Software Engineering Skills→
patricio0312revpatricio0312rev
5

tanstack-query-setup

Set up TanStack Query to manage server state in React apps.

Community
Advanced
PatternsDevPatternsDev
235

prefetch

Prefetch upcoming page assets using HTML link rel=prefetch, Webpack magic comments, or service workers.

Official
Intermediate
escalante-bioescalante-bio
14

corgi

Build web applications with React-like syntax and controller-based architecture.

Official
Advanced
willyu1007willyu1007

fetch-frontend-data

Fetch and mutate frontend data with cache invalidation and optimistic updates.

Community
Intermediate