Presets

genapi provides multiple presets for different HTTP clients and data-fetching layers (e.g. TanStack Query, Pinia Colada).

Available Presets

HTTP Client Presets

axios

Use axios:

import { axios } from '@genapi/presets'

export default defineConfig({
  preset: axios.ts, // TypeScript
  preset: axios.js, // JavaScript
})

fetch

Use the native Fetch API:

import { fetch } from '@genapi/presets'

export default defineConfig({
  preset: fetch.ts,
  preset: fetch.js,
})

ky

Use the lightweight ky:

import { ky } from '@genapi/presets'

export default defineConfig({
  preset: ky.ts,
  preset: ky.js,
})

got

Use got:

import { got } from '@genapi/presets'

export default defineConfig({
  preset: got.ts,
  preset: got.js,
})

ofetch

Use ofetch (UnJS ecosystem, with TypeScript support):

import { ofetch } from '@genapi/presets'

export default defineConfig({
  preset: ofetch.ts,
  preset: ofetch.js,
})

uni

Use @uni-helper/uni-network (UniApp network layer):

import { uni } from '@genapi/presets'

export default defineConfig({
  preset: uni.ts,
  preset: uni.js,
})

Data Layer Presets (TypeScript only)

The following presets generate fetcher functions plus hooks/composables. They only support TypeScript (no .js mode).

TanStack React Query

Uses @tanstack/react-query. Generates a fetcher and useQuery / useMutation per operation:

import { tanstackQuery } from '@genapi/presets'

export default defineConfig({
  preset: tanstackQuery.react,
  input: 'https://petstore3.swagger.io/api/v3/openapi.json',
  output: { main: 'src/api/index.ts' },
})

Generated code example:

import { useQuery, useMutation } from '@tanstack/react-query'

export async function getPets(config?: RequestInit) { /* ... */ }
export function useGetPets(/* params */) {
  return useQuery({ queryKey: ['getPets', /* ... */], queryFn: () => getPets(/* ... */) })
}
export function usePostPets() {
  return useMutation({ mutationFn: postPets })
}

TanStack Vue Query

Uses @tanstack/vue-query (Vue version of useQuery/useMutation):

import { tanstackQuery } from '@genapi/presets'

export default defineConfig({
  preset: tanstackQuery.vue,
  input: 'https://petstore3.swagger.io/api/v3/openapi.json',
  output: { main: 'src/api/index.ts' },
})

Pinia Colada

Uses @pinia/colada for type-safe query/mutation with Vue + Pinia (API: key + query / mutation):

import { tanstackQuery } from '@genapi/presets'

export default defineConfig({
  preset: tanstackQuery.colada,
  input: 'https://petstore3.swagger.io/api/v3/openapi.json',
  output: { main: 'src/api/index.ts' },
})

Generated code example:

import { useQuery, useMutation } from '@pinia/colada'

export async function getPets(config?: RequestInit) { /* ... */ }
export function useGetPets(/* params */) {
  return useQuery({ key: ['getPets', /* ... */], query: () => getPets(/* ... */) })
}
export function usePostPets() {
  return useMutation({ mutation: postPets })
}

TypeScript vs JavaScript

TypeScript presets (*.ts): Generate TypeScript with full type definitions
JavaScript presets (*.js): Generate JavaScript plus .d.ts type files
TanStack / Colada presets: TypeScript only, no JS mode

Recommendations

Use case	Preset
General web	`axios.ts`, `fetch.ts`
Node.js	`got.ts`, `ky.ts`
Nuxt / UnJS	`ofetch.ts`
UniApp	`uni.ts`
React + server state	`tanstackQuery.react`
Vue + server state	`tanstackQuery.vue`
Vue + Pinia data layer	`tanstackQuery.colada`

Next Steps

To customize the generation process, see Custom Pipeline.

Configuration

Custom Pipeline