skills.rest
endriwmsi
endriwmsiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

React-Query

Implement TanStack React Query v5 data fetching and mutation state management.

Updated Aug 23, 2026
Search Tags:#react#hooks#mutations#react-query#tanstack-query#data-fetching#cache-invalidation
One-click install
npx skills add https://github.com/endriwmsi/hub-ln --skill react-query-endriwmsi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: React-Query
Source: https://github.com/endriwmsi/hub-ln/tree/main/.cursor/skills/react-query
Command: npx skills add https://github.com/endriwmsi/hub-ln --skill react-query-endriwmsi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Simplifies management of asynchronous server data in React client components by providing caching, background updates, and mutation handling that reduce boilerplate and prevent inconsistent UI states.

Core Features & Use Cases

  • Declarative data fetching for list views, detail pages, and paginated queries with automatic cache management.
  • Mutation patterns with onSuccess and onError callbacks and recommended invalidation strategies to keep caches synchronized after create, update, or delete operations.
  • Structured query key conventions and naming patterns for hooks, plus the requirement to mark client hooks with use client to ensure correct runtime behavior.
  • Use case: implement a services table with list, detail, create, update, and delete flows where UI updates reliably reflect server state.

Quick Start

Use the React-Query skill to implement a client-side data fetching hook for listing services and ensure queries are invalidated after create or update operations.

Frequently Asked Questions about React-Query

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

FAQPage Schema
How do I manage asynchronous data fetching and cache invalidation in React client components?▼

React data fetching is managed through declarative client hooks that handle asynchronous server state, background updates, and cache invalidation to reduce boilerplate and prevent inconsistent UI states.

What is the best way to structure TanStack React Query v5 query keys and mutations?▼

TanStack React Query v5 uses structured query key conventions and naming patterns for hooks, requiring client hooks to be marked with use client to ensure correct runtime behavior for mutations and queries.

How do I keep my React query cache synchronized after create, update, or delete mutations?▼

Cache synchronization is achieved by using mutation callbacks like onSuccess and onError to invalidate queries, ensuring UI updates reliably reflect server state after create, update, or delete operations.

Can I use React-Query for paginated list views and detail pages in feature-based apps?▼

React-Query supports feature-based React apps by providing declarative data fetching for list views, detail pages, and paginated queries with automatic cache management for CRUD operations.

Why do my React Query hooks need the use client directive?▼

The use client directive is required for declarative client hooks to ensure correct runtime behavior when executing client-side asynchronous data fetching and mutation state management.

Related Skills

Explore More Software Engineering Skills→
tkgstratortkgstrator
1

tanstack-query-best-practices

Standardize TanStack Query server-state management for React apps.

Community
Advanced
iEnergyyiEnergyy

tanstack-query

Manage server-state data with automatic caching and background refetching.

Community
Advanced
mabdulraufmabdulrauf

store-data-structures

Organize Zustand store state into scalable list and detail data patterns.

Community
Advanced
IlyaGulyaIlyaGulya

solidjs-async

Manage asynchronous data fetching in SolidJS with createResource and Suspense.

Community
Intermediate