SWR

The SWR plugin generates a useSWR hook for each query and a useSWRMutation hook for each mutation.

The plugin ships no HTTP client. Each hook calls a function generated by a client plugin.

Installation

bun add -d @kubb/plugin-swr

pnpm add -D @kubb/plugin-swr

npm install --save-dev @kubb/plugin-swr

yarn add -D @kubb/plugin-swr

Or run kubb add plugin-swr to install the version the Kubb registry pins and add pluginSwr() to kubb.config.ts.

Setup

• Add @kubb/plugin-ts, or pluginZod({ inferred: 'codec' }) for codec types, and a client plugin: @kubb/plugin-fetch, @kubb/plugin-axios, or @kubb/plugin-client. Leave sdk unset on the client plugin.
• Install swr 2.2 or a later v2 release in the app that uses the generated code.
• Configure validation on the client plugin, not here.

Options worth knowing

• client picks fetch or axios when both client plugins are registered. A single client is detected automatically.
• query and mutation set which HTTP methods become queries (GET) and mutations (POST, PUT, PATCH, DELETE). They also set where SWR is imported from (swr and swr/mutation). Set either to false to skip those hooks.

The plugin does not generate useSWRInfinite hooks.

See Options for every option and its default.

Example

The config below generates useSWR and useSWRMutation hooks that call the Fetch client.

import { defineConfig } from 'kubb/config'
import { pluginTs } from '@kubb/plugin-ts'
import { pluginFetch } from '@kubb/plugin-fetch'
import { pluginSwr } from '@kubb/plugin-swr'

export default defineConfig({
  input: './petStore.yaml',
  output: { path: './src/gen' },
  plugins: [
    pluginTs(),
    pluginFetch(),
    pluginSwr(),
  ],
})