React Query

Generates TanStack Query helpers for React from your OpenAPI spec. By default you get queryOptions and mutationOptions factories with their cache keys. Set hooks: true to also get useQuery, useSuspenseQuery, useInfiniteQuery, and useMutation hooks.

The plugin ships no HTTP client. Each helper calls a function generated by a client plugin.

Installation

bun add -d @kubb/plugin-react-query

pnpm add -D @kubb/plugin-react-query

npm install --save-dev @kubb/plugin-react-query

yarn add -D @kubb/plugin-react-query

Or run kubb add plugin-react-query to install the version the Kubb registry pins and add pluginReactQuery() to kubb.config.ts.

Setup

• Add @kubb/plugin-ts and a client plugin: @kubb/plugin-fetch or @kubb/plugin-axios.
• Install @tanstack/react-query v5 or higher in the app that uses the generated code.
• Configure validation on the client plugin, not here.

Options worth knowing

• client picks fetch or axios when both client plugins are registered. A single client is detected automatically.
• hooks adds the use* hooks on top of the option factories.
• suspense adds useSuspenseQuery hooks.
• infinite adds infinite queries for pagination. Set infinite.queryParam to the query parameter that holds the page cursor.
• query and mutation set which HTTP methods become queries (GET) and mutations (POST, PUT, PATCH, DELETE), and where the TanStack Query runtime is imported from. Set either to false to skip it.
• customOptions routes every hook through your own function that returns extra options.