Suspense hooks

suspense adds a suspense variant next to each query. It is off by default, so set suspense: {} to turn it on, and pair it with hooks: true to generate useSuspenseQuery alongside useQuery. This needs TanStack Query v5 or later.

kubb.config.ts

import { defineConfig } from 'kubb/config'
import { pluginTs } from '@kubb/plugin-ts'
import { pluginFetch } from '@kubb/plugin-fetch'
import { pluginReactQuery } from '@kubb/plugin-react-query'

export default defineConfig({
  input: './petStore.yaml',
  output: { path: './src/gen', clean: true },
  plugins: [
    pluginTs(),
    pluginFetch(),
    pluginReactQuery({
      output: { path: 'hooks', mode: 'directory' },
      hooks: true,
      suspense: {},
    }),
  ],
})

import { useGetPetByIdSuspense } from './src/gen/hooks/useGetPetByIdSuspense'

const { data } = useGetPetByIdSuspense({ path: { petId: 1n } })

Output example

src/gen/hooks/useGetPetByIdSuspense.ts

import type { RequestConfig, ResponseErrorConfig } from '../.kubb/client'
import type { GetPetByIdOptions, GetPetByIdStatus200, GetPetByIdStatus400, GetPetByIdStatus404 } from '../types/GetPetById'
import type { QueryKey, QueryClient, UseSuspenseQueryOptions, UseSuspenseQueryResult } from '@tanstack/react-query'
import { getPetById } from '../clients/getPetById'
import { queryOptions, useSuspenseQuery } from '@tanstack/react-query'

export const getPetByIdSuspenseQueryKey = ({ path }: Omit<GetPetByIdOptions, 'headers'>) => [{ url: '/pet/:petId', params: path }] as const

type GetPetByIdSuspenseQueryKey = ReturnType<typeof getPetByIdSuspenseQueryKey>

export function useGetPetByIdSuspense<TData = GetPetByIdStatus200, TQueryKey extends QueryKey = GetPetByIdSuspenseQueryKey>(
  { path }: { path: GetPetByIdOptions['path'] | (() => GetPetByIdOptions['path']) },
  options: { query?: Partial<UseSuspenseQueryOptions<GetPetByIdStatus200, ResponseErrorConfig<GetPetByIdStatus400 | GetPetByIdStatus404>, TData, TQueryKey>> & { client?: QueryClient }, client?: Partial<Omit<RequestConfig, 'path' | 'query' | 'body' | 'headers' | 'url'>> } = {},
) {
  // ...builds queryKey/queryOptions, then calls useSuspenseQuery(...)
}

usage.ts

import { useGetPetByIdSuspense } from './src/gen/hooks/useGetPetByIdSuspense'
import { useGetPetById } from './src/gen/hooks/useGetPetById'

// petId is typed bigint (int64 format), so pass a BigInt literal
const { data } = useGetPetByIdSuspense({ path: { petId: 1n } })
const { data: regular } = useGetPetById({ path: { petId: 1n } })