@beta. For v3, read the docs in the v3 branch.Your OpenAPI document, as TanStack Query hooks
One command turns every operation into typed hooks, query options and prefetch helpers, together with the client they call.
npm install -D @7nohe/openapi-react-query-codegen@betanpx openapi-rq -i petstore.yaml
petstore.yaml
generated
useFindPetsuseQueryfindPetsOptionsqueryOptionsuseFindPetsSuspenseuseSuspenseQueryprefetchUseFindPetsprefetchQueryUseFindPetsKeyFnquery key
const { data } = useFindPets({ query: { limit: 10 } });useAddPetuseMutationUseAddPetKeyFnmutation keyaddPetplain functionAddPetDatarequest type
const { mutate } = useAddPet();useFindPaginatedPetsInfiniteuseInfiniteQueryuseFindPaginatedPetsuseQueryfindPaginatedPetsOptionsqueryOptionsuseFindPaginatedPetsSuspenseuseSuspenseQueryprefetchUseFindPaginatedPetsprefetchQuery
const { data, fetchNextPage } = useFindPaginatedPetsInfinite();From a specification to a typed call
Section titled “From a specification to a typed call”-
Install the generator next to TanStack Query.
Terminal window npm install -D @7nohe/openapi-react-query-codegen@betanpm install @tanstack/react-query -
Generate. Run it again whenever the specification changes.
Terminal window npx openapi-rq -i ./petstore.yaml -o ./src/openapi -
Call an operation. Its parameters, its response and its errors are typed from the specification.
import { useFindPets } from "./openapi/queries";function Pets() {const { data } = useFindPets({ query: { limit: 10 } });return <ul>{data?.map((pet) => <li key={pet.id}>{pet.name}</li>)}</ul>;}
Quick on large APIs
Section titled “Quick on large APIs”| openapi-react-query-codegen | 0.46 s |
|---|---|
| openapi-typescript | 2.10 s |
| Kubb | 2.98 s |
| @hey-api/openapi-ts | 2.98 s |
| Orval | 4.31 s |
Median of five runs with Node.js 24.22.0 on an Apple M2, measured on 2026-11-13 with version 4.0.0-beta.4. Installing the generator adds 9 packages to a project, and its output for the Stripe and GitHub APIs compiles without a type error. How these were measured, and the rest of the numbers.
What lands in your project
Section titled “What lands in your project”Directorysrc/openapi
Directoryqueries
- index.ts re-exports the three files below
- queries.ts
useQueryanduseMutationhooks - queryOptions.ts
queryOptions()factories for loaders anduseQueries - common.ts query keys and key functions for invalidation
- suspense.ts
- infiniteQueries.ts
- prefetch.ts
- ensureQueryData.ts
Directoryrequests
- sdk.gen.ts one function per operation
- types.gen.ts request and response types
- client.gen.ts the client to configure (base URL, interceptors)
- runtime.gen.ts the fetch or axios runtime, no package to install
- schemas.gen.ts
The client is plain TypeScript in your repository: there is no runtime package to keep in step with the generator, and the code works without React too.
Made for CI and for coding agents
Section titled “Made for CI and for coding agents”--checkregenerates into a temporary directory and fails when the committed output is out of date. Add it to CI.--jsonprints errors as one line of JSON with a stable code.--agentsMdkeeps a short guide in yourAGENTS.mdthat tells a coding agent how to look one operation up instead of reading the generated files. In our runs it cut what the agent had to read by a quarter to a third. See the measurements.