react-query-specialist

Guide TanStack Query v5 server-state management in React applications.

3|Updated Jan 31, 2026
One-click install
npx skills add https://github.com/gwpjp/Web3-Claude --skill react-query-specialist
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-query-specialist
Source: https://github.com/gwpjp/Web3-Claude/tree/main/.claude/skills/react-query-specialist
Command: npx skills add https://github.com/gwpjp/Web3-Claude --skill react-query-specialist

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides expert guidance to tame the complexity of server-state management in React applications using TanStack Query v5, helping teams avoid common pitfalls with caching, stale data, and refetch management.

Core Features & Use Cases

  • Robust query-architecture guidance with hierarchical keys and precise invalidation patterns to keep data consistent across REST, SSE, and blockchain integrations.
  • Caching and performance tuning using staleTime and gcTime, combined with optimistic updates and controlled refetch behavior to optimize user experiences.
  • End-to-end patterns for integrating Ponder SSE, wagmi, and REST data sources into a cohesive data layer for complex UIs.

Quick Start

Use the skill to design and verify a React Query data-fetching plan for a component that loads a list of entities with proper keys, caching, and invalidation.

Frequently Asked Questions about react-query-specialist

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

FAQPage Schema
How do I structure React Query keys to prevent stale data and invalidation issues?

Hierarchical query keys in TanStack Query enforce precise invalidation patterns, ensuring data consistency across REST, SSE, and blockchain integrations while preventing stale data rendering in complex UIs.

What is the best way to handle optimistic updates with TanStack Query v5?

Optimistic updates in TanStack Query v5 combine controlled refetch behavior with caching tuning using staleTime and gcTime, maximizing UI responsiveness while maintaining server-state consistency during mutations.

How do I integrate Ponder SSE data fetching with React Query?

Ponder SSE integrates into React Query through end-to-end patterns that unify SSE streams with REST APIs and wagmi blockchain data into a cohesive server-state layer with enabled guards and memoized transforms.

Does this React Query guidance work with wagmi blockchain integrations?

Wagmi blockchain integrations are fully supported, providing query-architecture guidance that orchestrates server-state across REST APIs, Ponder SSE, and Web3 data sources within a single cohesive data layer.

When should I tune staleTime vs gcTime for caching in TanStack Query?

Tune staleTime to control when cached data is considered fresh and gcTime to manage garbage collection of inactive queries, balancing performance with memory usage across complex React data-fetching workflows.

Why do I need enabled guards in React Query data-fetching plans?

Enabled guards prevent queries from automatically executing before required dependencies or parameters are ready, ensuring conditional data fetching and preventing unnecessary network requests in TanStack Query v5.