跳到主要内容

 

代码生成

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
// 或者从'@reduxjs/toolkit/query'导入，如果不使用自动生成的钩子
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

// 初始化一个空的api服务，我们将在后面根据需要注入端点
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选项给codegen。这将导致所有生成的端点都有providesTags/invalidatesTags声明，用于他们各自的操作定义的tags。

注意，这只会导致没有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 = {
  // ...
  // 只应包含端点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],
    },
  },
}