skills.rest
masanao-ohba
masanao-ohbaCOMMUNITY
Explore all skills by this author →
GitHub

react-query-patterns

Automate TanStack React Query server state patterns in TypeScript React projects.

2|Updated Oct 19, 2025
Search Tags:#react#tanstack#patterns#react-query#data-fetching#server-state
One-click install
npx skills add https://github.com/masanao-ohba/claude-manifests --skill react-query-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-query-patterns
Source: https://github.com/masanao-ohba/claude-manifests/tree/main/skills/typescript-react-query/patterns
Command: npx skills add https://github.com/masanao-ohba/claude-manifests --skill react-query-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack React Query patterns provide a reusable, battle-tested approach to managing server state in React applications. This Skill centralizes best practices for data fetching, caching, and mutation workflows, reducing boilerplate and inconsistencies across projects.

Core Features & Use Cases

  • Query patterns: consistent data fetching, caching strategies, and retry/idle behaviors.
  • Mutation & UI: standardized mutation flows, optimistic updates, and cache invalidation.
  • Advanced scenarios: infinite scrolling, dependent queries, and parallel queries for complex dashboards.
  • Use Case: In a dashboard app, apply these patterns to ensure predictable data loading, smooth UX, and minimal boilerplate when wiring API endpoints.

Quick Start

Install TanStack React Query in your project and start adopting the provided patterns by wrapping your app with a QueryClient provider and refactoring data access into reusable hooks following the patterns described.

Frequently Asked Questions about react-query-patterns

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

FAQPage Schema
How do I standardize React Query patterns for data fetching and mutations in my application?▼

Standardized React Query patterns automate consistent server state management for data fetching, caching, and mutation workflows. This reduces boilerplate and inconsistencies by providing reusable hooks for query behaviors and optimistic updates.

What's the best way to handle infinite scrolling and dependent queries with TanStack React Query?▼

TanStack React Query patterns handle infinite scrolling and dependent queries by applying standardized logic for complex dashboards. These patterns ensure predictable data loading and smooth UX while minimizing manual hook configuration.

Does this React Query patterns Skill require a specific version of TanStack installed?▼

Yes, the React Query patterns Skill requires a TypeScript React project with TanStack React Query v5 installed. You must wrap your application with a QueryClient provider before implementing the provided data access hooks.

How do I reduce boilerplate when wiring API endpoints and managing cache invalidation in React?▼

Reducing API endpoint boilerplate is achieved by refactoring data access into reusable hooks following React Query patterns. These patterns standardize cache invalidation and mutation flows, ensuring predictable server state across your project.

Can I use these server state patterns for optimistic updates in a React dashboard app?▼

Yes, these server state patterns support optimistic updates in React dashboard apps. They provide standardized mutation workflows that automatically handle cache invalidation and UI synchronization for a smooth user experience.

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
vecearvecear

tanstack-query-setup

Configure TanStack Query with QueryClient, provider, and typed hooks.

Community
Advanced
SlanyCukrSlanyCukr
2

TanStack Query v5

Manage React server state with data fetching, caching, and background updates.

Community
Advanced
nccasianccasia

tanstack-query-best-practices

Provides TanStack Query best practices for React data fetching, caching, mutation, and state management.

Official
Intermediate