代码生成

RTK Query 的 API 和架构围绕着提前声明 API 端点而构建。这非常适合从外部 API 模式定义（如 OpenAPI 和 GraphQL）自动生成 API 切片定义。

我们提供了一些代码生成功能的早期预览，作为独立工具。

GraphQL

我们提供了一个 GraphQL Codegen 插件。您可以在 graphql-codegen 主页上找到该插件的文档。

有关如何使用它的完整示例，您可以查看 此示例项目。

OpenAPI

我们提供了一个从 OpenAPI 模式生成 RTK Query 代码的包。它发布为 @rtk-query/codegen-openapi，您可以在 packages/rtk-query-codegen-openapi 中找到源代码。

使用

使用 createApi 创建一个空的 api，例如

src/store/emptyApi.ts

// Or from '@reduxjs/toolkit/query' if not using the auto-generated hooks
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

// initialize an empty api service that we'll inject endpoints into later as needed
export const emptySplitApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: () => ({}),
})

生成一个包含以下内容的配置文件（json、js 或 ts）

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

然后调用代码生成器

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

生成标签

如果您的 OpenAPI 规范使用 标签，您可以将 tag 选项指定给代码生成器。
这将导致所有生成的端点都具有其各自操作定义的 tags 的 providesTags/invalidatesTags 声明。

请注意，这只会导致没有 ID 的字符串标签，因此可能会导致在突变时过度失效并发出不必要的请求。

在这种情况下，仍然建议通过在生成的 api 之上使用 enhanceEndpoints 并手动声明 providesTags/invalidatesTags 来手动指定标签。

编程使用

src/store/petApi.ts

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

const api = await generateEndpoints({
  apiFile: './fixtures/emptyApi.ts',
  schemaFile: resolve(__dirname, 'fixtures/petstore.json'),
  filterEndpoints: ['getPetById', 'addPet'],
  hooks: true,
})

配置文件选项

简单使用

interface SimpleUsage {
  apiFile: string
  schemaFile: string
  apiImport?: string
  exportName?: string
  argSuffix?: string
  responseSuffix?: string
  hooks?:
    | boolean
    | { queries: boolean; lazyQueries: boolean; mutations: boolean }
  tag?: boolean
  outputFile: string
  filterEndpoints?:
    | string
    | RegExp
    | EndpointMatcherFunction
    | Array<string | RegExp | EndpointMatcherFunction>
  endpointOverrides?: EndpointOverrides[]
  flattenArg?: boolean
}

export type EndpointMatcherFunction = (
  operationName: string,
  operationDefinition: OperationDefinition,
) => boolean

过滤端点

如果您只想包含几个端点，可以使用 filterEndpoints 配置选项来过滤您的端点。

openapi-config.ts

const filteredConfig: ConfigFile = {
  // ...
  // should only have endpoints loginUser, placeOrder, getOrderById, deleteOrder
  filterEndpoints: ['loginUser', /Order/],
}

端点覆盖

如果端点被生成为突变而不是查询，反之亦然，您可以覆盖它

openapi-config.ts

const withOverride: ConfigFile = {
  // ...
  endpointOverrides: [
    {
      pattern: 'loginUser',
      type: 'mutation',
    },
  ],
}

生成钩子

设置 hooks: true 将生成 useQuery 和 useMutation 钩子导出。如果您还想生成 useLazyQuery 钩子或更细粒度的控制，您也可以传递一个对象，其形状为：{ queries: boolean; lazyQueries: boolean; mutations: boolean }。

多个输出文件

openapi-config.ts

const config: ConfigFile = {
  schemaFile: 'https://petstore3.swagger.io/api/v3/openapi.json',
  apiFile: './src/store/emptyApi.ts',
  outputFiles: {
    './src/store/user.ts': {
      filterEndpoints: [/user/i],
    },
    './src/store/order.ts': {
      filterEndpoints: [/order/i],
    },
    './src/store/pet.ts': {
      filterEndpoints: [/pet/i],
    },
  },
}