@kubb/plugin-react-query

@kubb/plugin-react-query turns each OpenAPI operation into a TanStack Query hook for React. Read operations become useFooQuery, useFooSuspenseQuery, or useFooInfiniteQuery. Write operations become useFooMutation. Every hook is typed: query keys, input variables, response data, and error shape all come from the spec.

The hooks call an HTTP client, so a client plugin must be registered. Add @kubb/plugin-ts for the types and either @kubb/plugin-axios or @kubb/plugin-fetch for the client. Generation errors out when no client plugin is present.

Each hook takes its parameters as a single grouped options object shaped as { body, path, query, headers }, with camelCase property names. The request still sends the original parameter names from the spec, and Kubb writes that mapping for you.

Installation

bun

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

pnpm

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

npm

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

yarn

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

Dependencies

This plugin needs these plugins in your config:

• @kubb/plugin-ts for the types.
• A client plugin, @kubb/plugin-axios or @kubb/plugin-fetch, for the HTTP layer. The hooks call its functions, so generation errors out when no client plugin is registered.

Set validator to 'zod' and the plugin also depends on @kubb/plugin-zod, which then has to be in the plugins list.

Example

kubb.config.ts

import {  } from 'kubb'
import {  } from '@kubb/plugin-ts'
import {  } from '@kubb/plugin-fetch'
import {  } from '@kubb/plugin-react-query'

export default ({
  : { : './petStore.yaml' },
  : { : './src/gen' },
  : [
    (),
    (),
    ({
      : { : './hooks' },
      : {
        : 'tag',
        : ({  }) => `${}Hooks`,
      },
      : 'fetch',
      : { : ['post', 'put', 'delete'] },
      : {
        : 'next_page',
        : 0,
        : 'pagination.next.cursor',
        : ['pagination', 'prev', 'cursor'],
      },
      : {
        : ['get'],
        : '@tanstack/react-query',
      },
      : {},
    }),
  ],
})

See Also

• TanStack Query
• Changelog