Client

Features

• Client that is using Axios behind the scenes to do REST calls
• Override with your own implementation

Default client

By default, @kubb/swagger-client/client is getting used as the client.

kubb.config.js

import { defineConfig } from '@kubb/core'
import { pluginOas } from '@kubb/plugin-oas'
import { pluginClient } from '@kubb/swagger-client'

export default defineConfig(() => {
  return {
    root: '.',
    input: {
      path: './petStore.yaml',
    },
    output: {
      path: './src/gen',
      clean: true,
    },
    plugins: [
      pluginOas({ output: false }),
      pluginClient({
        output: {
          path: './clients/axios',
        },
      }),
    ],
  }
})

./src/gen/clients/axios/client.ts

import axios from 'axios'

import type { AxiosError, AxiosRequestConfig} from 'axios'

export type RequestConfig<TVariables = unknown> = {
  method: 'get' | 'put' | 'patch' | 'post' | 'delete'
  url: string
  params?: unknown
  data?: TVariables
  responseType?: 'arraybuffer' | 'blob' | 'document' | 'json' | 'text' | 'stream'
  signal?: AbortSignal
  headers?: AxiosRequestConfig['headers']
}

export const axiosInstance = axios.create({
  baseURL: 'https://petstore3.swagger.io/api/v3'
  headers: '{}' ? JSON.parse('{}') : {},
})

export const axiosClient = async <TData, TError = unknown, TVariables = unknown>(config: RequestConfig<TVariables>): Promise<TData> => {
  const promise = axiosInstance
    .request<TData>({ ...config })
    .then(({ data }) => data)
    .catch((e: AxiosError<TError>) => {
      throw e
    })

  return promise
}

export default axiosClient

./src/gen/clients/axios/addPet.ts

import type { AddPetMutationRequest, AddPetMutationResponse } from '../../models/ts/AddPet'
import client from './client'

/**
 * @description Add a new pet to the store
 * @summary Add a new pet to the store
 * @link /pet
 */

export function addPet<TData = AddPetMutationResponse, TVariables = AddPetMutationRequest>(data: TVariables) {
  return client<TData, TVariables>({
    method: 'post',
    url: `/pet`,
    data,
  }) 
}

Custom client

Create your own implementation of the client. Handy when you want for example to use fetch instead of axios.

You can start by using a copy-paste of @kubb/swagger-client/client.

kubb.config.js

import { defineConfig } from '@kubb/core'
import { pluginOas } from '@kubb/plugin-oas'
import { pluginClient } from '@kubb/swagger-client'

export default defineConfig(() => {
  return {
    root: '.',
    input: {
      path: './petStore.yaml',
    },
    output: {
      path: './src/gen',
      clean: true,
    },
    plugins: [
      pluginOas({
        output: false,
      }),
      pluginClient({
        output: {
          path: './clients/axios',
        },
        client: {
          importPath: '@kubb/swagger-client/client',
        },
      }),
    ],
  }
})

./src/gen/axios/client.ts

import axios from 'axios'

import type { AxiosError, AxiosRequestConfig } from 'axios'

export type RequestConfig<TVariables = unknown> = {
  method: 'get' | 'put' | 'patch' | 'post' | 'delete'
  url: string
  params?: unknown
  data?: TVariables
  responseType?: 'arraybuffer' | 'blob' | 'document' | 'json' | 'text' | 'stream'
  signal?: AbortSignal
  headers?: AxiosRequestConfig['headers']
}

export const axiosInstance = axios.create({
  baseURL: 'https://petstore3.swagger.io/api/v3',
  headers: '{}' ? JSON.parse('{}') : {},
})

export const axiosClient = async <TData, TError = unknown, TVariables = unknown>(config: RequestConfig<TVariables>): Promise<TData> => {
  const promise = axiosInstance
    .request<TData>({ ...config })
    .then(({ data }) => data)
    .catch((e: AxiosError<TError>) => {
      throw e
    })

  return promise
}

export default axiosClient

./src/gen/clients/axios/addPet.ts

import type { AddPetMutationRequest, AddPetMutationResponse } from '../../models/ts/AddPet'
import client from './client'

/**
 * @description Add a new pet to the store
 * @summary Add a new pet to the store
 * @link /pet
 */
export function addPet<TData = AddPetMutationResponse, TVariables = AddPetMutationRequest>(data: TVariables) {
  return client<TData, TVariables>({
    method: 'post',
    url: `/pet`,
    data,
  }) 
}

Usage

Default client with process.env

Link: client.ts

import axios from 'axios'

import type { AxiosError, AxiosRequestConfig } from 'axios'

export type RequestConfig<TVariables = unknown> = {
  method: 'get' | 'put' | 'patch' | 'post' | 'delete'
  url: string
  params?: unknown
  data?: TVariables
  responseType?: 'arraybuffer' | 'blob' | 'document' | 'json' | 'text' | 'stream'
  signal?: AbortSignal
  headers?: AxiosRequestConfig['headers']
}

export const axiosInstance = axios.create({
  baseURL: process.env['AXIOS_BASE'],
  headers: process.env['AXIOS_HEADERS'] ? JSON.parse(process.env['AXIOS_HEADERS']) : {},
})

export const axiosClient = async <TData, TError = unknown, TVariables = unknown>(config: RequestConfig<TVariables>): Promise<TData> => {
  const promise = axiosInstance
    .request<TData>({ ...config })
    .then(({ data }) => data)
    .catch((e: AxiosError<TError>) => {
      throw e
    })

  return promise
}

export default axiosClient

Default client with declare const

Link: client.ts

import axios from 'axios'

import type { AxiosError, AxiosHeaders, AxiosRequestConfig } from 'axios'

declare const AXIOS_BASE: string
declare const AXIOS_HEADERS: string

export type RequestConfig<TVariables = unknown> = {
  method: 'get' | 'put' | 'patch' | 'post' | 'delete'
  url: string
  params?: unknown
  data?: TVariables
  responseType?: 'arraybuffer' | 'blob' | 'document' | 'json' | 'text' | 'stream'
  signal?: AbortSignal
  headers?: AxiosRequestConfig['headers']
}

export const axiosInstance = axios.create({
  baseURL: typeof AXIOS_BASE !== 'undefined' ? AXIOS_BASE : undefined,
  headers: typeof AXIOS_HEADERS !== 'undefined' ? (JSON.parse(AXIOS_HEADERS) as AxiosHeaders) : undefined,
})

export const axiosClient = async <TData, TError = unknown, TVariables = unknown>(config: RequestConfig<TVariables>): Promise<TData> => {
  const promise = axiosInstance
    .request<TData>({ ...config })
    .then(({ data }) => data)
    .catch((e: AxiosError<TError>) => {
      throw e
    })

  return promise
}

export default axiosClient