Use of Fetch

By default, @kubb/plugin-client uses the Axios client from @kubb/plugin-client/templates/axios, which is based on the Axios instance interface.

Use Fetch or Ky if you need a custom client.

Create kubb.config.ts

Set importPath to a relative path, import alias, or library (default: @kubb/plugin-client/templates/axios).

See plugins/plugin-client.

import {  } from 'kubb'
import {  } from '@kubb/plugin-client'
import {  } from '@kubb/adapter-oas'
import {  } from '@kubb/plugin-ts'

export default (() => {
  return {
    : '.',
    : {
      : './petStore.yaml',
    },
    : {
      : './src/gen',
      : true,
    },
    : (),
    : [
      ({
        : { : 'models.ts' },
      }),
      ({
        : {
          : '.',
        },
        : '../client.ts',
      }),
    ],
  }
})

Add client.ts

All HTTP requests (POST, PUT, GET, PATCH, DELETE) use the importPath to invoke your default export.

The request configuration follows the RequestConfig type, modeled after the Axios request interface.

IMPORTANT

The client must return an object in the shape of ResponseConfig, even if you change dataReturnType with dataReturnType: 'data'.

client.ts

export type RequestConfig<TData = unknown> = {
  url?: string
  method: 'GET' | 'PUT' | 'PATCH' | 'POST' | 'DELETE'
  params?: object
  data?: TData | FormData
  responseType?: 'arraybuffer' | 'blob' | 'document' | 'json' | 'text' | 'stream'
  signal?: AbortSignal
  headers?: HeadersInit
}

export type ResponseConfig<TData = unknown> = {
  data: TData
  status: number
  statusText: string
}

export type Client = <TData, _TError = unknown, TVariables = unknown>(config: RequestConfig<TVariables>) => Promise<ResponseConfig<TData>>

export const client = async <TData, TError = unknown, TVariables = unknown>(config: RequestConfig<TVariables>): Promise<ResponseConfig<TData>> => {
  const response = await fetch('https://example.org/post', {
    method: config.method.toUpperCase(),
    body: JSON.stringify(config.data),
    signal: config.signal,
    headers: config.headers,
  })

  const data = await response.json()

  return {
    data,
    status: response.status,
    statusText: response.statusText,
  }
}

View generated code

src/gen/models.ts

import client from '../client.ts'
import type { ResponseConfig } from '../client.ts'
import type { GetPetByIdQueryResponse, GetPetByIdPathParams } from './models.ts'

/**
 * @description Returns a single pet
 * @summary Find pet by ID
 * @link /pet/:petId
 */
export async function getPetById(
  petId: GetPetByIdPathParams['petId'],
  options: Partial<Parameters<typeof client>[0]> = {},
): Promise<ResponseConfig<GetPetByIdQueryResponse>['data']> {
  const res = await client<GetPetByIdQueryResponse>({ method: 'get', url: `/pet/${petId}`, ...options })
  return res.data
}