How does queryOptions improve my React code?

The queryOptions pattern allows you to define your query configuration once and share it across different hooks like useQuery, useSuspenseQuery, and prefetchQuery, ensuring your API logic remains DRY (Don't Repeat Yourself).

Does this skill support optimistic UI updates?

Yes, the skill includes implementation patterns for mutationOptions that handle onMutate for UI updates, onError for rolling back state, and onSettled for final synchronization with the server.

What are the benefits of using a Query Key Factory?

A Query Key Factory centralizes your cache keys in a single object, ensuring naming consistency and making complex cache invalidations—such as clearing specific detail views while keeping lists—simple and type-safe.

Why is the recommended file structure better than putting queries in components?

Separating API functions, keys, and options into dedicated files within an entity folder promotes better modularity, makes unit testing easier, and prevents your UI components from becoming bloated with data-fetching logic.

React Query Patterns

Name: React Query Patterns
Author: dding-g

bydding-g

0•

API Development

Implements standardized TanStack Query patterns using Query Key Factories and centralized option definitions for robust server state management.

This skill provides a comprehensive architectural framework for managing server state in React applications using TanStack Query. It enforces industry best practices such as the Query Key Factory pattern for type-safe cache invalidation, and the use of queryOptions and mutationOptions for reusable, modular logic. By standardizing file structures and API interaction patterns, this skill helps developers implement advanced features like optimistic updates, React Suspense integration, and sophisticated caching strategies while eliminating common anti-patterns like inline query definitions and manual key management.

Key Features

01Standardized domain-driven file structure for API and state modules

02Query Key Factory pattern for hierarchical and type-safe cache management

03Seamless integration guides for React Suspense and Error Boundaries

04Centralized queryOptions and mutationOptions for reusable state logic

05Pre-configured patterns for optimistic updates and error recovery

060 GitHub stars

Use Cases

01Refactoring scattered useQuery hooks into a maintainable, centralized API layer

02Architecting scalable server state for large-scale enterprise React applications

03Implementing complex cache invalidation flows across related data entities

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dding-g/ddingg-claude-marketplace react-query-patterns

For use in Claude.ai and ChatGPT

Download Skill