manage-server-data%2fgenerate-rtk-query-from-openapi（管理服务器数据%2f 从 openapi 生成 rtk 查询）

Generate RTK Query From OpenAPI

Setup

// file: src/store/emptyApi.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const emptySplitApi = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api/' }),
  endpoints: () => ({}),
})

// file: openapi-config.ts
import type { ConfigFile } from '@rtk-query/codegen-openapi'

const config: ConfigFile = {
  schemaFile: 'https://petstore3.swagger.io/api/v3/openapi.json',
  apiFile: './src/store/emptyApi.ts',
  apiImport: 'emptySplitApi',
  outputFile: './src/store/petApi.ts',
  exportName: 'petApi',
  hooks: true,
}

export default config

Run:

npx @rtk-query/codegen-openapi openapi-config.ts

Core Patterns

Generate into an empty shared API

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const emptySplitApi = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api/' }),
  endpoints: () => ({}),
})

Codegen works best when it extends a single RTK Query architecture instead of creating standalone API roots.

Filter endpoints when the schema is too broad

import type { ConfigFile } from '@rtk-query/codegen-openapi'

const config: ConfigFile = {
  schemaFile: './openapi.json',
  apiFile: './src/store/emptyApi.ts',
  apiImport: 'emptySplitApi',
  outputFile: './src/store/userApi.ts',
  exportName: 'userApi',
  hooks: true,
  filterEndpoints: ['loginUser', /User/],
}

export default config

Start with a narrow slice of the schema if the full surface area is too noisy or the package boundaries differ from the OpenAPI file.

Use endpointOverrides to fix generation results

import type { ConfigFile } from '@rtk-query/codegen-openapi'

const config: ConfigFile = {
  schemaFile: './openapi.json',
  apiFile: './src/store/emptyApi.ts',
  apiImport: 'emptySplitApi',
  outputFile: './src/store/petApi.ts',
  exportName: 'petApi',
  hooks: true,
  tag: true,
  endpointOverrides: [
    {
      pattern: 'loginUser',
      type: 'mutation',
    },
    {
      pattern: /.*/,
      parameterFilter: (_name, parameter) => parameter.in !== 'header',
    },
    {
      pattern: 'getPetById',
      providesTags: ['SinglePet'],
    },
  ],
}

export default config

Review generated endpoints and override type, parameter, or tag behavior instead of hand-editing the emitted file.

Common Mistakes

HIGH Assuming generated tags are already specific enough

Wrong:

const config: ConfigFile = {
  schemaFile: './openapi.json',
  apiFile: './src/store/emptyApi.ts',
  apiImport: 'emptySplitApi',
  outputFile: './src/store/petApi.ts',
  exportName: 'petApi',
  tag: true,
}

Correct:

const config: ConfigFile = {
  schemaFile: './openapi.json',
  apiFile: './src/store/emptyApi.ts',
  apiImport: 'emptySplitApi',
  outputFile: './src/store/petApi.ts',
  exportName: 'petApi',
  tag: true,
  endpointOverrides: [
    {
      pattern: 'getPetById',
      providesTags: ['SinglePet'],
    },
  ],
}

Generated tags are string-only by default, so they can invalidate more cache than intended.

Source: reduxjs/redux-toolkit:docs/rtk-query/usage/code-generation.mdx

HIGH Generating a brand-new API root instead of extending an empty one

Wrong:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

type Pet = { id: string; name: string }

export const petApi = createApi({
  reducerPath: 'petApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api/' }),
  endpoints: (build) => ({
    getPetById: build.query<Pet, string>({
      query: (id) => `pets/${id}`,
    }),
  }),
})

Correct:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const emptySplitApi = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api/' }),
  endpoints: () => ({}),
})

Generated code should plug into one RTK Query architecture so invalidation and store wiring stay coherent.

Source: reduxjs/redux-toolkit:docs/rtk-query/usage/code-generation.mdx

MEDIUM Trusting generated shapes without overrides or review

Wrong:

const config: ConfigFile = {
  schemaFile: './openapi.json',
  apiFile: './src/store/emptyApi.ts',
  apiImport: 'emptySplitApi',
  outputFile: './src/store/petApi.ts',
  exportName: 'petApi',
}

Correct:

const config: ConfigFile = {
  schemaFile: './openapi.json',
  apiFile: './src/store/emptyApi.ts',
  apiImport: 'emptySplitApi',
  outputFile: './src/store/petApi.ts',
  exportName: 'petApi',
  endpointOverrides: [
    {
      pattern: 'loginUser',
      type: 'mutation',
    },
  ],
}

Real schemas often need type, parameter, or tag correction; treat generated output as reviewed source, not gospel.

Source: reduxjs/redux-toolkit:docs/rtk-query/usage/code-generation.mdx

References

• Codegen override patterns and review checklist