@kubb/plugin-react-query

With the Swagger Tanstack Query plugin you can create:

• react-query hooks based on an operation in the Swagger file.
• solid-query primitives based on an operation in the Swagger file.
• svelte-query primitives based on an operation in the Swagger file.
• vue-query hooks based on an operation in the Swagger file.

Installation

bun

bun add @kubb/plugin-react-query

pnpm

pnpm add @kubb/plugin-react-query

npm

npm install @kubb/plugin-react-query

yarn

yarn add @kubb/plugin-react-query

Options

output

output.path

Output to save the Tanstack Query hooks.

INFO

Type: string
Default: 'hooks'

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

const plugin = pluginReactQuery({
  output: {
    path: './hooks',
  },
})

output.exportAs

Name to be used for the export * as from './'

INFO

Type: string

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

const plugin = pluginReactQuery({
  output: {
    path: './hooks',
    exportAs: 'hooks',
  },
})

output.extName

Add an extension to the generated imports and exports, default it will not use an extension

INFO

Type: string

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

const plugin = pluginReactQuery({
  output: {
    path: './hooks',
    extName: '.js',
  },
})

output.exportType

Define what needs to exported, here you can also disable the export of barrel files

INFO

Type: 'barrel' | 'barrelNamed' | false

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

const plugin = pluginReactQuery({
  output: {
    path: './hooks',
    exportType: 'barrel',
  },
})

group

Group the Tanstack Query hooks based on the provided name.

group.type

Tag will group based on the operation tag inside the Swagger file.

Type: 'tag'
Required: true

group.output

TIP

When defining a custom output path, you should also update output.path to contain the same root path.

Relative path to save the grouped Tanstack Query hooks. {{tag}} will be replaced by the current tagName.

Type: string
Example: hooks/{{tag}}Controller => hooks/PetController
Default: '${output}/{{tag}}Controller'

group.exportAs

Name to be used for the export * as {{exportAs}} from './

Type: string
Default: '{{tag}}Hooks'

INFO

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

const plugin = pluginReactQuery({
  output: {
    path: './hooks'
  },
  group: { type: 'tag', output: './hooks/{{tag}}Hooks' },
})

client

client.importPath

Path to the client import path that will be used to do the API calls.
It will be used as import client from '${client.importPath}'.
It allows both relative and absolute paths. the path will be applied as is, so the relative path should be based on the file being generated.

INFO

Type: string
Default: '@kubb/plugin/client'

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

const plugin = pluginReactQuery({
  client: {
    importPath: '../../client.ts',
  },
})

dataReturnType

ReturnType that needs to be used when calling client().

'data' will return ResponseConfig[data].
'full' will return ResponseConfig.

TYPE

'data'

export async function getPetById<TData>(
  petId: GetPetByIdPathParams,
): Promise<ResponseConfig<TData>["data"]> {
...
}

'full'

export async function getPetById<TData>(
  petId: GetPetByIdPathParams,
): Promise<ResponseConfig<TData>> {
...
}

INFO

Type: 'data' | 'full'
Default: 'data'

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

const plugin = pluginReactQuery({
  dataReturnType: 'data',
})

parser

Which parser can be used before returning the data to @tanstack/query.

'zod' will use @kubb/plugin-zod to parse the data.

TYPE

'zod'

export function getPetByIdQueryOptions() {
  const queryKey = getPetByIdQueryKey(petId)
  return {
    queryKey,
    queryFn: async () => {
      const res = await client({
        method: 'get',
        url: `/pet/${ petId }`,
      })

      return getPetByIdQueryResponseSchema.parse(res.data)
    },
  }
}

INFO

Type: 'zod'

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

const plugin = pluginReactQuery({
  parser: 'zod',
})

framework

Framework to be generated for.

INFO

Type: 'react' | 'solid' | 'svelte' | 'vue'
Default: 'react'

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

const plugin = pluginReactQuery({
  framework: 'react',
})

infinite

When set, an 'infiniteQuery' hook will be added.
To disable infinite queries pass false.

TYPE

Infinite

type Infinite = {
  /**
   * Specify the params key used for `pageParam`.
   * Used inside `useInfiniteQuery`, `createInfiniteQueries`, `createInfiniteQuery`
   * @default `'id'`
   */
  queryParam: string
  /**
   * Which field of the data will be used, set it to undefined when no cursor is known.
   */
  cursorParam: string | undefined
  /**
   * The initial value, the value of the first page.
   * @default `0`
   */
  initialPageParam: unknown
} | false

INFO

Type: Infinite

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

const plugin = pluginReactQuery({
  infinite: {}
})

infinite.queryParam

Specify the params key used for pageParam.
Used inside useInfiniteQuery, createInfiniteQueries, createInfiniteQuery.

INFO

Type: string
Default: 'id'

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

const plugin = pluginReactQuery({
  infinite: {
    queryParam: 'next_page',
  }
})

infinite.initialPageParam

Specify the initial page param value.
Used inside useInfiniteQuery, createInfiniteQueries, createInfiniteQuery and will only be needed for v5.

INFO

Type: string
Default: '0'

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

const plugin = pluginReactQuery({
  infinite: {
    queryParam: 'next_page',
    initialPageParam: 0,
  }
})

infinite.cursorParam

Which field of the data will be used, set it to undefined when no cursor is known.
Used inside useInfiniteQuery, createInfiniteQueries, createInfiniteQuery and will only be needed for v5.

INFO

Type: string | undefined

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

const plugin = pluginReactQuery({
  infinite: {
    queryParam: 'next_page',
    cursorParam: 'nextCursor',
  }
})

query

Override some useQuery behaviours.
To disable queries pass false.

TYPE

Query

type Query = {
  /**
   * Customize the queryKey, here you can specify a suffix.
   */
  queryKey?: (key: unknown[]) => unknown[]
  methods: Array<HttpMethod>
  importPath?: string
} | false

INFO

Type: Query

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

const plugin = pluginReactQuery({
  query: {}
})

query.queryKey

Customize the queryKey, here you can specify a suffix.

WARNING

When using a string you need to use JSON.stringify.

INFO

Type: (key: unknown[]) => unknown[]

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

const plugin = pluginReactQuery({
  query: {
    queryKey: (key) => [ JSON.stringify('SUFFIX'), ...key ],
  }
})

query.methods

Define which HttpMethods can be used for queries

WARNING

When using a string you need to use JSON.stringify.

INFO

Type: Array<HttpMethod>
Default: ['get']

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

const plugin = pluginReactQuery({
  query: {
    methods: [ 'get' ],
  }
})

query.importPath

Path to the useQuery that will be used to do the useQuery functionality. It will be used as import { useQuery } from '${hook.importPath}'. It allows both relative and absolute path. the path will be applied as is, so relative path should be based on the file being generated.

INFO

Type: string
Default: '@tanstack/react-query' if 'framework' is set to 'react'

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

const plugin = pluginReactQuery({
  query: {
    importPath: "@kubb/react-query"
  }
})

queryOptions

To disable queryOptions pass false.

TYPE

Query

type QueryOptions = {} | false

INFO

Type: QueryOptions

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

const plugin = pluginReactQuery({
  queryOptions: {}
})

suspense

When set, a suspenseQuery hook will be added. This will only work for v5 and react.

TYPE

Suspense

type Suspense = {} | false

INFO

Type: Suspense

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

const plugin = pluginReactQuery({
  suspense: {}
})

mutate

To disable mutations pass false.

TYPE

Mutate

type Mutate = {
  variablesType: 'mutate' | 'hook'
  methods: Array<HttpMethod>
} | false

variablesType

Define the way of passing through the queryParams, headerParams and data.

'mutate' will use the mutate or mutateAsync function.
'hook' will use the useMutation hook.

TYPE

'mutate'

const { mutate } = useDeletePet()

mutate({
  petId: 1,
})

'hook'

const { mutate } = useDeletePet(1)

mutate()

INFO

Type: 'mutate' | 'hook'
Default: 'hook'

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

const plugin = pluginReactQuery({
  mutate: {
    variablesType: 'mutate',
    methods: [ 'post', 'put', 'delete' ],
  },
})

methods

Define which HttpMethods can be used for mutations

TYPE

INFO

Type: 'Array<HttpMethod>
Default: ['post', 'put', 'delete']

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

const plugin = pluginReactQuery({
  mutate: {
    variablesType: 'hook',
    methods: [ 'post', 'put', 'delete' ],
  },
})

include

Array containing include parameters to include tags/operations/methods/paths.

TYPE

Include

export type Include = {
  type: 'tag' | 'operationId' | 'path' | 'method'
  pattern: string | RegExp
}

INFO

Type: Array<Include>

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

const plugin = pluginReactQuery({
  include: [
    {
      type: 'tag',
      pattern: 'store',
    },
  ],
})

exclude

Array containing exclude parameters to exclude/skip tags/operations/methods/paths.

TYPE

Exclude

export type Exclude = {
  type: 'tag' | 'operationId' | 'path' | 'method'
  pattern: string | RegExp
}

INFO

Type: Array<Exclude>

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

const plugin = pluginReactQuery({
  exclude: [
    {
      type: 'tag',
      pattern: 'store',
    },
  ],
})

override

Array containing override parameters to override options based on tags/operations/methods/paths.

TYPE

Override

export type Override = {
  type: 'tag' | 'operationId' | 'path' | 'method'
  pattern: string | RegExp
  options: PluginOptions
}

INFO

Type: Array<Override>

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

const plugin = pluginReactQuery({
  override: [
    {
      type: 'tag',
      pattern: 'pet',
      options: {
        dataReturnType: 'full',
      },
    },
  ],
})

transformers

transformers.name

Override the name of the hook that is getting generated, this will also override the name of the file.

INFO

Type: (name: string, type?: "function" | "type" | "file" ) => string

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

const plugin = pluginReactQuery({
  transformers: {
    name: (name) => {
      return `${ name }Hook`
    },
  },
})

templates

Make it possible to override one of the templates.

TIP

See templates for more information about creating templates.
Set false to disable a template.

TYPE

Templates

import type { Mutation, Query, QueryOptions, QueryKey, QueryImports } from '@kubb/plugin-react-query/components'

export type Templates = {
  mutation: typeof Mutation.templates | false
  query: typeof Query.templates | false
  queryOptions: typeof QueryOptions.templates | false
  queryKey: typeof QueryKey.templates | false
  queryImports: typeof QueryImports.templates | false
}

INFO

Type: Templates

import { pluginReactQuery } from '@kubb/plugin-react-query'
import { Query } from '@kubb/plugin-react-query/components'
import React from 'react'

export const templates = {
  ...Query.templates,
} as const

const plugin = pluginReactQuery({
  templates: {
    query: templates,
  },
})

Example

import { defineConfig } from '@kubb/core'
import { pluginOas } from '@kubb/plugin-oas'
import { pluginReactQuery } from '@kubb/plugin-react-query'
import { pluginTs } from '@kubb/plugin-ts'

export default defineConfig({
  input: {
    path: './petStore.yaml',
  },
  output: {
    path: './src/gen',
  },
  plugins: [
    pluginOas(),
    pluginTs(),
    pluginReactQuery({
      output: {
        path: './hooks',
      },
      group: {
        type: 'tag',
        output: './hooks/{{tag}}Hooks'
      },
      framework: 'react',
      dataReturnType: 'full',
      mutate: {
        variablesType: 'hook',
        methods: [ 'post', 'put', 'delete' ],
      },
      infinite: {
        queryParam: 'next_page',
        initialPageParam: 0,
        cursorParam: 'nextCursor',
      },
      query: {
        methods: [ 'get' ],
        importPath: "@tanstack/react-query"
      },
      suspense: {},
    }),
  ],
})

Links

• Tanstack Query