What happens when my OpenAPI schema changes?

You simply regenerate the client code using the hey-api CLI, and TypeScript will immediately identify any breaking changes in your component data fetching.

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

Generated query options from hey-api ensure total type safety and consistency across your project, preventing manual type drift from your API schema and reducing boilerplate.

Does this skill support React Query v5 features?

Yes, it is fully optimized for React Query v5, utilizing updated patterns like isPending, gcTime, and the removal of legacy callbacks.

How do I handle API base URLs and authentication?

The skill follows a pattern of centralized configuration using client.setConfig() within a provider component, typically driven by environment variables.

React Query & OpenAPI State Manager

Name: React Query & OpenAPI State Manager
Author: agents-inc

byagents-inc

•

API開発

Generates type-safe React Query hooks and client code from OpenAPI specifications using hey-api for robust server-state management.

This skill automates the creation of production-grade data fetching layers by synchronizing OpenAPI schemas with React Query v5. It eliminates manual type definitions and boilerplate by leveraging hey-api's code generation, ensuring that frontend client code remains perfectly aligned with backend APIs. By enforcing best practices such as centralized configuration, named constants for time values, and the use of generated query options instead of custom hooks, it provides a scalable architecture for modern React applications.

主な機能

01Full type safety for service functions and query options

021 GitHub stars

03Standardized error handling and exponential backoff retry patterns

04Built-in support for debounced queries and conditional fetching

05Centralized API client configuration via environment variables

06Automated OpenAPI-to-React Query code generation

ユースケース

01Implementing standardized React Query v5 patterns across complex codebases

02Automating API client generation to eliminate manual fetching boilerplate

03Synchronizing frontend TypeScript definitions with backend OpenAPI schemas

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

主な機能

01Full type safety for service functions and query options

021 GitHub stars

03Standardized error handling and exponential backoff retry patterns

04Built-in support for debounced queries and conditional fetching

05Centralized API client configuration via environment variables

06Automated OpenAPI-to-React Query code generation

ユースケース

01Implementing standardized React Query v5 patterns across complex codebases

02Automating API client generation to eliminate manual fetching boilerplate

03Synchronizing frontend TypeScript definitions with backend OpenAPI schemas

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