Skip to content

Client beta

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.

typescript
import { defineConfig } from '@kubb/core'
import createSwagger from '@kubb/swagger'
import createSwaggerClient from '@kubb/swagger-client'

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

export default defineConfig(() => {
  return {
    root: '.',
    input: {
      path: './petStore.yaml',
    },
    output: {
      path: './src/gen',
      clean: true,
    },
    plugins: [
      createSwagger({ output: false }),
      createSwaggerClient({
        output: './clients/axios', 
      }),
    ],
  }
})
typescript
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
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
typescript
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, 
  }) 
} 
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 examples to use fetch instead of axios.

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

typescript
import { defineConfig } from '@kubb/core'
import createSwagger from '@kubb/swagger'
import createSwaggerClient from '@kubb/swagger-client'

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

export default defineConfig(() => {
  return {
    root: '.',
    input: {
      path: './petStore.yaml',
    },
    output: {
      path: './src/gen',
      clean: true,
    },
    plugins: [
      createSwagger({
        output: false,
      }),
      createSwaggerClient({
        output: './clients/axios', 
        clientImportPath: '@kubb/swagger-client/client', 
      }),
    ],
  }
})
typescript
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
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
typescript
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, 
  }) 
} 
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

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

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

Released under the MIT License.