Can I still customize query behavior like staleTime?

Yes. You are encouraged to spread the generated query options into useQuery and override specific properties like staleTime, gcTime, or enabled conditions as needed.

How do I handle different environments like staging or production?

The skill enforces using environment variables to configure the API base URL within a centralized client provider, ensuring portability across environments.

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

Generated options ensure 100% type safety synchronized with your OpenAPI spec, reducing runtime errors and eliminating the need to manually maintain interfaces.

Does this skill support React Query v5?

Yes, it is specifically optimized for React Query v5 patterns, including the use of isPending and the removal of legacy callbacks like onSuccess/onError in useQuery.

Does it work with GraphQL?

No, this skill is specifically designed for RESTful APIs defined via OpenAPI/Swagger specifications using the hey-api toolchain.

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 from OpenAPI specifications using hey-api.

This skill streamlines frontend data fetching by integrating React Query with hey-api's OpenAPI code generation. It eliminates manual type definitions and custom hook boilerplate by generating fully typed query options directly from your API schema. By enforcing best practices like named constants for timeouts and environment-based configuration, it ensures a robust, maintainable, and type-safe bridge between backend services and React frontends, optimized specifically for TanStack Query v5 patterns.

主要功能

010 GitHub stars

02Type-safe React Query options generation to eliminate manual hook writing

03Centralized API configuration using environment variables and named constants

04Advanced fetching patterns including debouncing and conditional queries

05Automated OpenAPI-to-TypeScript client generation via hey-api

06Standardized error handling and global cache management patterns

使用场景

01Reducing boilerplate code in React applications using TanStack Query

02Syncing frontend types automatically with backend OpenAPI/Swagger schemas

03Standardizing API interaction patterns across large scale engineering 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

主要功能

010 GitHub stars

02Type-safe React Query options generation to eliminate manual hook writing

03Centralized API configuration using environment variables and named constants

04Advanced fetching patterns including debouncing and conditional queries

05Automated OpenAPI-to-TypeScript client generation via hey-api

06Standardized error handling and global cache management patterns

使用场景

01Reducing boilerplate code in React applications using TanStack Query

02Syncing frontend types automatically with backend OpenAPI/Swagger schemas

03Standardizing API interaction patterns across large scale engineering 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