What version of React Query does this skill support?

This skill is optimized for TanStack Query (React Query) v5, enforcing its specific patterns such as using isPending instead of isLoading and removing legacy callbacks.

How does it handle environment-specific API URLs?

The skill enforces a pattern where the API client base URL is configured via environment variables, allowing the same code to work across local, staging, and production environments.

Can I use this without an OpenAPI spec?

No, this skill is specifically designed for OpenAPI-first workflows. If you don't have a spec, it is recommended to create one or use a tool like tRPC.

Why use hey-api instead of writing manual hooks?

hey-api generates code directly from your OpenAPI spec, ensuring your frontend types never drift from the backend and eliminating the need to manually maintain interfaces.

React Query & OpenAPI State Manager

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

byagents-inc

0•

API 开发

Generates type-safe React Query hooks and client code directly from OpenAPI specifications to eliminate manual type definitions and boilerplate.

This skill automates the creation of robust server state management layers by synchronizing your frontend with OpenAPI definitions. It leverages hey-api to generate fully-typed React Query options and SDK functions, ensuring your application remains in sync with the backend while enforcing best practices like named constants for timeouts and environment-based configuration. It is particularly valuable for teams building complex React applications that require high type safety, consistent data fetching patterns, and a single source of truth for API contracts.

主要功能

010 GitHub stars

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

03Built-in patterns for debounced queries and global error handling

04Centralized API client configuration via environment variables

05Enforcement of TanStack Query v5 patterns and naming conventions

06Automatic type-safe code generation from OpenAPI specs using hey-api

使用场景

01Synchronizing frontend data fetching layers with backend Swagger/OpenAPI documentation

02Migrating legacy fetch calls to a consistent, cache-enabled React Query architecture

03Rapidly scaffolding type-safe API clients for new React or React Native projects

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

主要功能

010 GitHub stars

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

03Built-in patterns for debounced queries and global error handling

04Centralized API client configuration via environment variables

05Enforcement of TanStack Query v5 patterns and naming conventions

06Automatic type-safe code generation from OpenAPI specs using hey-api

使用场景

01Synchronizing frontend data fetching layers with backend Swagger/OpenAPI documentation

02Migrating legacy fetch calls to a consistent, cache-enabled React Query architecture

03Rapidly scaffolding type-safe API clients for new React or React Native projects

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