Skip to content

@kubb/swagger-tanstack-query 🦙

TIP


Tanstack/query v5 is fully supported, see Migrating to TanStack Query v5.

Just install v5 in your project and Kubb will check the package.json to see if you are using v4 or v5.

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

shell
bun add @kubb/swagger-tanstack-query @kubb/swagger-ts @kubb/plugin-oas @kubb/swagger-client
shell
pnpm add @kubb/swagger-tanstack-query @kubb/swagger-ts @kubb/plugin-oas  @kubb/swagger-client
shell
npm install @kubb/swagger-tanstack-query @kubb/swagger-ts @kubb/plugin-oas  @kubb/swagger-client
shell
yarn add @kubb/swagger-tanstack-query @kubb/swagger-ts @kubb/plugin-oas  @kubb/swagger-client

Options

output

output.path

Output to save the Tanstack Query hooks.

INFO

Type: string
Default: 'hooks'

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
output
: {
path
: './hooks',
}, })

output.exportAs

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

INFO

Type: string

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
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

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
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

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
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

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

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
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/swagger-client/client'

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
client
: {
importPath
: '../../client.ts',
}, })

dataReturnType

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

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

TYPE

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

INFO

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

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
dataReturnType
: 'data',
})

parser

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

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

TYPE

typescript
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'

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
parser
: 'zod',
})

framework

Framework to be generated for.

INFO

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

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
framework
: 'react',
})

infinite

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

TYPE

typescript
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

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
infinite
: {}
})

infinite.queryParam

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

INFO

Type: string
Default: 'id'

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
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'

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
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

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
infinite
: {
queryParam
: 'next_page',
cursorParam
: 'nextCursor',
} })

query

Override some useQuery behaviours.
To disable queries pass false.

TYPE

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

INFO

Type: Query

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
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[]

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
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']

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
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'

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
query
: {
importPath
: "@kubb/react-query"
} })

queryOptions

To disable queryOptions pass false.

TYPE

typescript
type QueryOptions = {} | false

INFO

Type: QueryOptions

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
queryOptions
: {}
})

suspense

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

TYPE

typescript
type Suspense = {} | false

INFO

Type: Suspense

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
suspense
: {}
})

mutate

To disable mutations pass false.

TYPE

typescript
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

typescript
const { mutate } = useDeletePet()

mutate({
  petId: 1,
})
typescript
const { mutate } = useDeletePet(1)

mutate()

INFO

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

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
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']

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
mutate
: {
variablesType
: 'hook',
methods
: [ 'post', 'put', 'delete' ],
}, })

include

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

TYPE

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

INFO

Type: Array<Include>

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
include
: [
{
type
: 'tag',
pattern
: 'store',
}, ], })

exclude

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

TYPE

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

INFO

Type: Array<Exclude>

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
exclude
: [
{
type
: 'tag',
pattern
: 'store',
}, ], })

override

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

TYPE

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

INFO

Type: Array<Override>

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
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

typescript
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
const
plugin
=
pluginTanstackQuery
({
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

typescript
import type { Mutation, Query, QueryOptions, QueryKey, QueryImports } from '@kubb/swagger-tanstack-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

tsx
import { 
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
import {
Query
} from '@kubb/swagger-tanstack-query/components'
import React from 'react' export const
templates
= {
...
Query
.
templates
,
} as
const
const
plugin
=
pluginTanstackQuery
({
templates
: {
query
:
templates
,
}, })

Example

typescript
import { 
defineConfig
} from '@kubb/core'
import {
pluginOas
} from '@kubb/plugin-oas'
import {
pluginTanstackQuery
} from '@kubb/swagger-tanstack-query'
import {
pluginTs
} from '@kubb/swagger-ts'
export default
defineConfig
({
input
: {
path
: './petStore.yaml',
},
output
: {
path
: './src/gen',
},
plugins
: [
pluginOas
(),
pluginTs
(),
pluginTanstackQuery
({
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
: {},
parser
: 'zod',
}), ], })

Released under the MIT License.