Can I use this without an OpenAPI specification?

This skill is specifically designed for OpenAPI-first workflows. If you don't have a spec, you should consider creating one or using a tool like tRPC.

How does it handle different environments like staging and production?

The skill enforces a pattern of configuring the API client's base URL via environment variables, allowing for seamless transitions between environments.

Does this skill support TanStack Query v5?

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

What is the benefit of using generated query options?

Using generated query options ensures 100% type safety between your API and UI, reduces boilerplate code, and automatically manages query keys.

React Query & OpenAPI Integration

Name: React Query & OpenAPI Integration
Author: agents-inc

byagents-inc

0•

API開発

Automates the generation of type-safe React Query hooks and API clients directly from OpenAPI specifications.

This skill streamlines frontend development by leveraging hey-api to transform OpenAPI schemas into fully typed client code and TanStack Query options. It eliminates manual type definitions and hook creation, ensuring that your frontend state remains in perfect sync with your backend API. By enforcing a single source of truth, it helps developers implement robust data fetching patterns, centralized client configuration, and standardized error handling without the risk of type drift.

主な機能

01Built-in patterns for debounced queries and conditional fetching

02Standardized global error handling and retry logic for TanStack Query v5

030 GitHub stars

04Automatic code generation from OpenAPI specs via @hey-api/openapi-ts

05Type-safe React Query options for zero-boilerplate data fetching

06Centralized API client configuration using environment variables

ユースケース

01Synchronizing frontend TypeScript types with backend API changes automatically

02Building scalable React applications with consistent data fetching architectures

03Implementing standardized API caching and retry policies across large teams

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

主な機能

01Built-in patterns for debounced queries and conditional fetching

02Standardized global error handling and retry logic for TanStack Query v5

030 GitHub stars

04Automatic code generation from OpenAPI specs via @hey-api/openapi-ts

05Type-safe React Query options for zero-boilerplate data fetching

06Centralized API client configuration using environment variables

ユースケース

01Synchronizing frontend TypeScript types with backend API changes automatically

02Building scalable React applications with consistent data fetching architectures

03Implementing standardized API caching and retry policies across large teams

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