Does this skill support TanStack Query version 5?

Yes, the skill is specifically optimized for React Query v5, implementing modern patterns for error handling, the isPending state, and the transition from cacheTime to gcTime.

How do I handle API base URLs for different deployment environments?

The skill includes patterns for configuring the API client base URL via environment variables within a centralized provider component, ensuring the same build works across staging and production.

Why should I use generated query options instead of custom hooks?

Generated options ensure total type safety and prevent 'type drift' between your backend schema and frontend code, while significantly reducing the amount of manual boilerplate code you need to maintain.

What happens if my OpenAPI schema changes?

You simply regenerate the client code using the openapi-ts command. Because the skill uses generated types, TypeScript will immediately highlight any breaking changes in your components.

React Query Server State & OpenAPI Codegen

Name: React Query Server State & OpenAPI Codegen
Author: agents-inc

byagents-inc

•

API 개발

Generates type-safe React Query hooks and client code from OpenAPI specifications using hey-api to eliminate manual data fetching boilerplate.

This skill provides a standardized framework for managing server state in React applications by integrating TanStack Query with hey-api (openapi-ts). It automates the generation of type-safe query options and SDK functions directly from OpenAPI schemas, ensuring your frontend remains perfectly synchronized with your backend API contract. By enforcing modern best practices—such as named constants for timeouts, environment-driven configuration, and React Query v5 patterns—it significantly reduces runtime errors and developer overhead while maintaining a single source of truth.

주요 기능

01Centralized API client and QueryClient configuration patterns

02Standardized error handling and exponential backoff strategies

03Optimized patterns for debouncing and conditional fetching

043 GitHub stars

05Automated hey-api code generation from OpenAPI specs

06Type-safe React Query options and SDK service functions

사용 사례

01Implementing standardized server-state management in complex React or React Native projects

02Migrating to TanStack Query v5 with modern, auto-generated type-safe patterns

03Synchronizing frontend TypeScript definitions with backend OpenAPI/Swagger documentation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-server-state-react-query

For use in Claude.ai and ChatGPT

주요 기능

01Centralized API client and QueryClient configuration patterns

02Standardized error handling and exponential backoff strategies

03Optimized patterns for debouncing and conditional fetching

043 GitHub stars

05Automated hey-api code generation from OpenAPI specs

06Type-safe React Query options and SDK service functions

사용 사례

01Implementing standardized server-state management in complex React or React Native projects

02Migrating to TanStack Query v5 with modern, auto-generated type-safe patterns

03Synchronizing frontend TypeScript definitions with backend OpenAPI/Swagger documentation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-server-state-react-query

For use in Claude.ai and ChatGPT