Skip to content
These docs describe v4, which is in beta: install it with @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@beta

npx openapi-rq -i petstore.yaml

petstore.yaml

/pets:get:parameters: [tags, limit]responses: { "200": Pet[] }post:requestBody: NewPetresponses: { "200": Pet }/paginated-pets:get:parameters: [page, limit]responses: { "200": PetPage }

generated

  • useFindPetsuseQuery
  • findPetsOptionsqueryOptions
  • useFindPetsSuspenseuseSuspenseQuery
  • prefetchUseFindPetsprefetchQuery
  • UseFindPetsKeyFnquery key
const { data } = useFindPets({ query: { limit: 10 } });
  1. Install the generator next to TanStack Query.

    Terminal window
    npm install -D @7nohe/openapi-react-query-codegen@beta
    npm install @tanstack/react-query
  2. Generate. Run it again whenever the specification changes.

    Terminal window
    npx openapi-rq -i ./petstore.yaml -o ./src/openapi
  3. 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>;
    }
Generating the client for the GitHub REST API (1,272 operations)
openapi-react-query-codegen0.46 s
openapi-typescript2.10 s
Kubb2.98 s
@hey-api/openapi-ts2.98 s
Orval4.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.

  • Directorysrc/openapi
    • Directoryqueries
      • index.ts re-exports the three files below
      • queries.ts useQuery and useMutation hooks
      • queryOptions.ts queryOptions() factories for loaders and useQueries
      • 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.

  • --check regenerates into a temporary directory and fails when the committed output is out of date. Add it to CI.
  • --json prints errors as one line of JSON with a stable code.
  • --agentsMd keeps a short guide in your AGENTS.md that 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.