如何结合使用NSwag与RTK Query？简化API客户端开发工作

方案一：自定义NSwag模板直接生成RTK Query切片 #

NSwag支持自定义TypeScript生成模板，你可以基于官方默认模板修改，让它直接输出符合RTK Query规范的API切片代码，无需手动定义端点：

1. 复制NSwag自带的TypeScriptClient.nswag模板文件，修改其中的方法生成逻辑
2. 将每个API接口方法转换成RTK Query的query配置，自动注入到createApi的endpoints中
3. 生成的代码会自动包含createApi、fetchBaseQuery的初始化逻辑，直接导出可使用的API切片

示例模板生成的代码片段：

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

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getUsers: builder.query<User[], void>({
      query: () => '/users',
    }),
    // 其他NSwag生成的接口自动转换为类似端点
  }),
});

export const { useGetUsersQuery } = apiSlice;

方案二：用自定义baseQuery适配已有NSwag客户端 #

如果不想修改NSwag生成流程，可以通过RTK Query的自定义baseQuery复用已生成的客户端，避免手动编码端点：

1. 导入NSwag生成的API客户端实例
2. 编写自定义baseQuery，将RTK Query的请求参数映射到客户端方法的调用参数，处理响应和错误
3. 在createApi中使用这个自定义baseQuery，快速定义端点

示例代码：

import { createApi, BaseQueryFn } from '@reduxjs/toolkit/query/react';
import { GeneratedApiClient } from './generated-api-client';

const apiClient = new GeneratedApiClient('/api');

const customBaseQuery: BaseQueryFn<{ method: keyof GeneratedApiClient; args: any[] }, unknown, unknown> = async (args) => {
  try {
    const data = await apiClient[args.method](...args.args);
    return { data };
  } catch (error) {
    return { error };
  }
};

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: customBaseQuery,
  endpoints: (builder) => ({
    getUsers: builder.query<User[], void>({
      query: () => ({ method: 'getUsers', args: [] }),
    }),
    // 其他端点只需指定对应的客户端方法和参数
  }),
});

方案三：封装工具函数批量生成RTK Query端点 #

针对已有的NSwag客户端，可以写一个通用工具函数，批量将客户端方法转换为RTK Query端点，减少重复劳动：

import { EndpointBuilder } from '@reduxjs/toolkit/query/react';

type ApiMethod<T> = (...args: any[]) => Promise<T>;

function createQueryEndpoint<TResult, TArgs>(
  builder: EndpointBuilder<any, any, any>,
  method: ApiMethod<TResult>,
  endpointName: string
) {
  return builder.query<TResult, TArgs>({
    query: (args) => method(args),
  });
}

// 使用示例
export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getUsers: createQueryEndpoint(builder, apiClient.getUsers, 'getUsers'),
    getUserById: createQueryEndpoint(builder, apiClient.getUserById, 'getUserById'),
  }),
});

注意事项 #

• 自定义NSwag模板的方式一劳永逸，但需要维护模板，NSwag版本更新时可能需要同步调整模板逻辑
• 自定义baseQuery方式更灵活，无需修改生成流程，但要注意参数映射和错误处理的一致性
• 工具函数方式适合已有生成好的客户端，快速批量生成端点，减少手动重复代码

内容的提问来源于stack exchange，提问作者adam0101