How do I handle authentication with this skill?

Authentication is handled through a centralized client configuration pattern, allowing you to set auth headers or interceptors once in a provider component rather than in every fetch call.

Does this support React Query version 5?

Yes, this skill is specifically optimized for React Query v5 patterns, including updated property names like isPending and the removal of legacy success/error callbacks.

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

Using generated options ensures your frontend remains perfectly synced with your API schema, providing full type safety and eliminating the maintenance burden of manual hook creation and type definitions.

What happens if my OpenAPI schema changes?

The skill instructs Claude to regenerate the client code using the openapi-ts command, which automatically updates all types and query options to match the new schema.

Type-Safe React Query Generator

Name: Type-Safe React Query Generator
Author: agents-inc

byagents-inc

0•

API開発

Automates the creation of type-safe React Query hooks and API clients from OpenAPI specifications using hey-api.

This skill streamlines frontend data fetching by integrating OpenAPI specifications with TanStack Query (React Query) v5. It leverages the hey-api code generator to produce fully typed query options, SDK functions, and client configurations, eliminating the need for manual type definitions or custom hooks. By enforcing a single source of truth through OpenAPI schemas, it prevents type drift, ensures consistent implementation patterns across the codebase, and automates complex tasks like error handling, retry logic, and debounced queries.

主な機能

01Automated OpenAPI-to-TypeScript client generation using hey-api

02Type-safe implementation patterns for debouncing and conditional fetching

03Pre-configured React Query v5 patterns for caching and global error handling

040 GitHub stars

05Centralized API client configuration via environment variables

06Standardized use of generated query options to eliminate custom hook boilerplate

ユースケース

01Building production-grade React applications that consume RESTful APIs with OpenAPI documentation

02Synchronizing frontend types and API client logic automatically when backend schemas change

03Standardizing data fetching patterns across large development teams to reduce bugs and maintenance

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

主な機能

01Automated OpenAPI-to-TypeScript client generation using hey-api

02Type-safe implementation patterns for debouncing and conditional fetching

03Pre-configured React Query v5 patterns for caching and global error handling

040 GitHub stars

05Centralized API client configuration via environment variables

06Standardized use of generated query options to eliminate custom hook boilerplate

ユースケース

01Building production-grade React applications that consume RESTful APIs with OpenAPI documentation

02Synchronizing frontend types and API client logic automatically when backend schemas change

03Standardizing data fetching patterns across large development teams to reduce bugs and maintenance

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