skills.rest
bibektimilsina00
bibektimilsina00COMMUNITY
Explore all skills by this author →
GitHub

react-query-best-practices

Enforce React Query server-state patterns with query key factories and AbortSignal forwarding.

1|1|Updated May 13, 2026
Search Tags:#cache invalidation#react-query#server-state#staleTime#query keys#abort signal#mutation patterns
One-click install
npx skills add https://github.com/bibektimilsina00/fuse_monorepo --skill react-query-best-practices-bibektimilsina00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-query-best-practices
Source: https://github.com/bibektimilsina00/fuse_monorepo/tree/main/.agents/skills/react-query-best-practices
Command: npx skills add https://github.com/bibektimilsina00/fuse_monorepo --skill react-query-best-practices-bibektimilsina00

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents inconsistent or inefficient server-state handling in the Fuse React frontend by enforcing standardized React Query usage.

Core Features & Use Cases

  • Query Key Factories: Enforces hierarchical query key factories to enable targeted cache invalidation and avoid brittle inline keys.
  • Signal Forwarding: Ensures AbortSignal is forwarded through queryFn and underlying fetch functions for proper request cancellation.
  • Explicit staleTime & Correct Mutation Patterns: Requires explicit staleTime on every query and routes all writes through useMutation with onSuccess invalidation.
  • State Separation (React Query vs Zustand): Blocks storing server data in Zustand to reduce stale/duplicated sources of truth.
  • Use Case: When reviewing a workflow or server-state feature in apps/web, use this Skill to audit queries/mutations and rewrite violations to match Fuse conventions.

Quick Start

Audit the React Query usage in apps/web and rewrite any server-state violations to use query key factories, forwarded signals, explicit staleTime, and useMutation with cache invalidation.

Frequently Asked Questions about react-query-best-practices

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

FAQPage Schema
How do I fix React Query cache invalidation bugs with query keys?▼

Fix React Query cache invalidation by enforcing hierarchical query key factories, which replace brittle inline keys and enable targeted cache invalidation across queries and mutations.

What is the best way to separate server state in React Query from Zustand?▼

Separate server state by blocking storage of server data in Zustand, routing all reads through React Query and all writes through useMutation to eliminate stale or duplicated sources of truth.

How do I forward AbortSignal in React Query useQuery?▼

Forward AbortSignal by passing the signal from useQuery through your queryFn and underlying fetch functions, ensuring proper request cancellation when components unmount or queries become stale.

Why does React Query refetch data too often without staleTime?▼

React Query refetches too often without explicit staleTime because the default stale window triggers immediate background updates, so requiring explicit staleTime on every useQuery prevents inefficient fetching.

How do I use useMutation with query invalidation for server writes?▼

Use useMutation for server writes by routing all data modifications through it and configuring onSuccess handlers to invalidate relevant query keys, ensuring the cache updates immediately after successful mutations.

Related Skills

Explore More Software Engineering Skills→
AngelP17AngelP17
1

react-state-management

Implement React state management patterns with Redux Toolkit, Zustand, Jotai, and React Query.

Community
Intermediate
tunacosguntunacosgun

react-query-best-practices

Audit React Query code for hierarchical keys, staleTime, and server state ownership.

Community
Advanced
shafibabarshafibabar
1

react-state-management

Architect React state by separating server data from client UI state.

Community
Advanced
bovinphangbovinphang
21

fec-data-fetching

Manage server-state fetching, caching, and invalidation across frontend frameworks.

Community
Advanced