Can I use this without an OpenAPI specification?

This skill is optimized for OpenAPI-first development. If you don't have a spec, it is recommended to generate one first or consider using tRPC for end-to-end type safety.

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

Generated options ensure full type safety and consistency with your OpenAPI schema, preventing manual type drift and significantly reducing the amount of boilerplate code you need to maintain.

Does this skill support TanStack Query v5?

Yes, it is specifically designed for React Query v5 patterns, including the use of isPending, gcTime, and centralized error handling via QueryCache and MutationCache.

How do I handle API base URLs across environments?

The skill enforces using environment variables combined with the client.setConfig method, allowing your API client to adapt to local, staging, and production environments without code changes.

Type-Safe React Query & OpenAPI

Name: Type-Safe React Query & OpenAPI
Author: agents-inc

byagents-inc

0•

API 개발

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

This skill streamlines frontend data fetching by synchronizing React Query state with OpenAPI schemas through the hey-api generator. It enforces architectural best practices by eliminating manual hook creation and manual type definitions, ensuring your client-side state management remains perfectly in sync with your backend API contract. By providing standardized patterns for centralized configuration, error handling, and performance optimizations like debouncing, it allows developers to focus on building features rather than managing boilerplate data-fetching logic.

주요 기능

01Automated TypeScript client generation from OpenAPI/Swagger specs

020 GitHub stars

03Centralized API configuration using environment variables

04Standardized error handling and retry logic for TanStack Query v5

05Type-safe React Query hooks via generated query options

06Built-in patterns for debounced and conditional data fetching

사용 사례

01Implementing standardized server-state management across large React teams

02Syncing frontend types automatically when backend API schemas change

03Setting up production-grade API clients with global error boundaries and auth

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 TypeScript client generation from OpenAPI/Swagger specs

020 GitHub stars

03Centralized API configuration using environment variables

04Standardized error handling and retry logic for TanStack Query v5

05Type-safe React Query hooks via generated query options

06Built-in patterns for debounced and conditional data fetching

사용 사례

01Implementing standardized server-state management across large React teams

02Syncing frontend types automatically when backend API schemas change

03Setting up production-grade API clients with global error boundaries and auth

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