skills.rest
antonyfmunoz
antonyfmunozCOMMUNITY
Explore all skills by this author →
GitHub

tanstack_react_query

Manage server-state fetching, caching, and mutation-driven invalidation in React with query keys.

1|Updated Mar 11, 2026
Search Tags:#suspense#react#tanstack query#mutations#optimistic updates#server-state#query keys
One-click install
npx skills add https://github.com/antonyfmunoz/OS --skill tanstack-react-query-antonyfmunoz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack_react_query
Source: https://github.com/antonyfmunoz/OS/tree/main/skills/tools/tanstack_react_query
Command: npx skills add https://github.com/antonyfmunoz/OS --skill tanstack-react-query-antonyfmunoz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

TanStack React Query prevents server-state chaos by replacing hand-rolled fetch logic with a keyed, cached, automatically refreshing state layer for client apps.

Core Features & Use Cases

  • Server-state caching with query keys: Use deterministic query keys to deduplicate requests and keep shared data consistent across components.
  • Mutations that invalidate the right data: Write server-owned updates via mutations and invalidate or update the relevant query keys to refresh stale UI.
  • Robust UX for loading and errors: Handle initial loading, background refetching, and failure recovery using Suspense/ErrorBoundary or explicit pending/error flags.
  • Optimistic updates and rollback: Update cached data immediately during mutations, then roll back if the server rejects the change.
  • Performance guardrails: Avoid request waterfalls, stale remount refetch loops, and unnecessary rerenders by using select and queryOptions.

Quick Start

Use TanStack React Query for any EOS SaaS screen that fetches, caches, mutates, or invalidates backend-owned data, and implement it with QueryClientProvider, useQuery/useMutation, and a query-key factory based on your feature domain.

Frequently Asked Questions about tanstack_react_query

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

FAQPage Schema
How do I cache server-state data in React and prevent duplicate fetch requests?▼

Server-state caching in React uses deterministic query keys to deduplicate requests and keep shared data consistent across components. This replaces hand-rolled fetch logic with a keyed, cached, automatically refreshing state layer.

How do I refresh stale React UI data after submitting a form mutation?▼

To refresh stale React UI data after a form mutation, write server-owned updates via mutations and invalidate the relevant query keys. This mechanism automatically refreshes the specific cached data affected by the submission.

What is the best way to handle loading and error states when fetching backend resources in React?▼

The best way to handle loading and error states for backend resources is using Suspense or ErrorBoundary components. This manages initial loading, background refetching, and failure recovery without manual state tracking.

How do I apply optimistic updates to cached data and roll back if the server rejects the change?▼

Optimistic updates immediately update cached data during mutations, then roll back automatically if the server rejects the change. This provides instant UI feedback while maintaining consistency with server-owned data.

Why does my React app over-fetch data and trigger refetch loops when components remount?▼

Refetch loops and unnecessary rerenders happen without performance guardrails. Prevent request waterfalls and stale remount refetch loops by using the select function and queryOptions to control fetching behavior.

Can I use TanStack React Query for paginated lists and detailed backend resource pages?▼

Yes, TanStack React Query applies directly to SaaS pages that list, detail, paginate, or submit forms for backend resources. It requires React Query v5 hooks and a shared QueryClient singleton to manage async lifecycles.

Related Skills

Explore More Software Engineering Skills→
tkgstratortkgstrator
1

tanstack-query-best-practices

Standardize TanStack Query server-state management for React apps.

Community
Advanced
Prathmesh2000Prathmesh2000
1

react-query-patterns

Implement React Query patterns for server state management in React apps.

Community
Advanced
BIGSHOLBIGSHOL

verify-lazy-loading

Validate React.lazy, Suspense, and ErrorBoundary implementation in UI components.

Community
Intermediate
The13thNodeThe13thNode
3

frontend-data-layer

Manage React server state with TanStack Query v5 and typed endpoints.

Community
Advanced