Skip to content
React Query

React Query

Officialv5.3.2

@kubb/plugin-react-query

kubb add plugin-react-query

Options

Pass these options to pluginReactQuery(). Shared options link to Shared plugin options for details.

Options overview

OptionPurposeDefault
outputWhere files are written: path, mode, barrel, banner, footer.{ path: 'hooks', barrel: { type: 'named' } }
groupSplit output by tag or path: type, name.None
clientWhich registered client plugin the hooks call.Auto-detected
infiniteGenerate useInfiniteQuery hooks for pagination.false
suspenseGenerate useSuspenseQuery hooks.false
queryConfigure the query hooks.{ methods: ['GET'], importPath: '@tanstack/react-query' }
queryKeyBuild the queryKey for each query hook.Built-in queryKeyTransformer
mutationConfigure the mutation hooks.{ methods: ['POST', 'PUT', 'PATCH', 'DELETE'], importPath: '@tanstack/react-query' }
mutationKeyBuild the mutationKey for each mutation hook.Built-in mutationKeyTransformer
customOptionsRoute every hook through your own options function.None
hooksEmit use* hook functions on top of the factories.false
includeKeep only operations that match.None
excludeSkip operations that match.[]
overrideApply different options per pattern.[]
resolverCustomize generated names and file paths.resolverReactQuery
macrosRewrite AST nodes before printing.[]

Option details

client

Selects which registered client plugin the hooks call. A single registered client is auto-detected. Set client when several are registered.

Type'axios' | 'fetch'
Requiredfalse
'fetch'
Calls the operations generated by @kubb/plugin-fetch.
'axios'
Calls the operations generated by @kubb/plugin-axios.

infinite

Adds infiniteQueryOptions and useInfiniteQuery for operations that declare the query parameter named in infinite.queryParam. Needs hooks: true.

TypePartial<Infinite> | false
Requiredfalse
Defaultfalse

infinite.queryParam

Query parameter that carries the page cursor.

Typestring
Requiredfalse
Default'id'

infinite.initialPageParam

Initial value for pageParam on the first fetch.

Typeunknown
Requiredfalse
Default0

infinite.nextParam

Path to the next-page cursor on the response, as dot notation ('pagination.next.id') or array form (['pagination', 'next', 'id']).

Typestring | Array<string> | null
Requiredfalse
Defaultnull

infinite.previousParam

Path to the previous-page cursor on the response, in the same dot or array form.

Typestring | Array<string> | null
Requiredfalse
Defaultnull

infinite.cursorParam

Deprecated path to the cursor field, read for both getNextPageParam and getPreviousPageParam when set. Use nextParam and previousParam instead.

Typestring | null
Requiredfalse
Defaultnull

infinite.getNextPageParam

Source code for TanStack Query's getNextPageParam, copied into the generated code as written. Use it when the next page must be computed instead of read from a field. Takes precedence over nextParam and cursorParam.

Typestring | null
Requiredfalse
Defaultnull
infinite: {
  queryParam: 'page',
  getNextPageParam: '(lastPage) => (lastPage.hasNext ? lastPage.number + 1 : undefined)',
  getPreviousPageParam: '(firstPage) => (firstPage.number > 0 ? firstPage.number - 1 : undefined)',
}

Without getNextPageParam, nextParam or cursorParam, the hook counts pages up from initialPageParam until a page is an empty array. This works only for array responses, so generation warns when the response is an object.

infinite.getPreviousPageParam

Source code for TanStack Query's getPreviousPageParam, copied into the generated code as written. Takes precedence over previousParam and cursorParam.

Typestring | null
Requiredfalse
Defaultnull

suspense

Adds useSuspenseQuery hooks next to the regular query hooks. Pass {} to turn it on. Needs TanStack Query v5 or higher and hooks: true.

TypePartial<object> | false
Requiredfalse
Defaultfalse

query

Which operations become queries, emitting a queryOptions factory by default. Pass false to skip, or set hooks to also emit useQuery.

TypePartial<Query> | false
Requiredfalse
Default{ methods: ['GET'], importPath: '@tanstack/react-query' }

query.methods

HTTP methods treated as queries.

TypeArray<string>
Requiredfalse
Default['GET']

query.importPath

Module for the queryOptions and useQuery imports.

Typestring
Requiredfalse
Default'@tanstack/react-query'

queryKey

Builds the queryKey for each hook from the operation node, casing and variant. Strings are copied into the generated code as written, so wrap a string literal in JSON.stringify(...).

Type(props: { node, casing, variant }) => Array<unknown>
Requiredfalse
DefaultBuilt-in queryKeyTransformer

variant is 'query', 'suspenseQuery', 'infiniteQuery' or 'suspenseInfiniteQuery'. The default key adds infinite: true to infinite variants so they never share a cache entry with the plain query.

queryKey: ({ node, variant }) => [JSON.stringify({ variant, operationId: node.operationId })]

mutation

Which operations become mutations, emitting a mutationOptions factory by default. Set false to skip, or set hooks to also emit useMutation.

TypePartial<Mutation> | false
Requiredfalse
Default{ methods: ['POST', 'PUT', 'PATCH', 'DELETE'], importPath: '@tanstack/react-query' }

mutation.methods

HTTP methods treated as mutations.

TypeArray<string>
Requiredfalse
Default['POST', 'PUT', 'PATCH', 'DELETE']

mutation.importPath

Module for the mutationOptions and useMutation imports.

Typestring
Requiredfalse
Default'@tanstack/react-query'

mutationKey

Builds the mutationKey for each mutation hook, for batched invalidations or useMutationState. Same props and string-inlining caveat as queryKey, with variant set to 'mutation'.

Type(props: { node, casing, variant }) => Array<unknown>
Requiredfalse
DefaultBuilt-in mutationKeyTransformer

customOptions

Routes every hook through your own function that returns extra options such as onSuccess or select. Also emits a HookOptions type that maps each hook name to its options type. Needs hooks: true.

Type{ importPath: string, name?: string }
Requiredfalse

customOptions.importPath

Module of your custom-options hook, imported as a named import.

Typestring
Requiredtrue when customOptions is set

customOptions.name

Exported name of your custom-options hook.

Typestring
Requiredfalse
Default'useCustomHookOptions'

hooks

When false (the default), only the queryOptions, mutationOptions, queryKey and mutationKey helpers are written, using factory imports that work across TanStack Query adapters. Set true to also generate useQuery, useSuspenseQuery, useInfiniteQuery, useSuspenseInfiniteQuery, and useMutation.

Typeboolean
Requiredfalse
Defaultfalse

resolver

Overrides generated file and symbol names. Omitted members keep resolverReactQuery. The shared members (name, file, imports) and the this context are described under resolver.

TypeResolverPatch<ResolverReactQuery>
Requiredfalse
Partial override
type ResolverReactQueryPatch = {
  // plus the shared name, file, and imports members
  query?: {
    name?(node: OperationNode): string         // → 'useGetPetById'
    optionsName?(node: OperationNode): string  // → 'getPetByIdQueryOptions'
    keyName?(node: OperationNode): string       // → 'getPetByIdQueryKey'
    keyTypeName?(node: OperationNode): string   // → 'GetPetByIdQueryKey'
    clientName?(node: OperationNode): string    // → 'getPetById'
  }
  // suspenseQuery, infiniteQuery, suspenseInfiniteQuery: same members as query
  mutation?: {
    name?(node: OperationNode): string          // → 'useUpdatePet'
    optionsName?(node: OperationNode): string
    keyName?(node: OperationNode): string
    typeName?(node: OperationNode): string      // → 'UpdatePet'
  }
  hook?: {
    optionsName?(): string
    customOptionsName?(): string
  }
}