RTK Query 如何为每个 endpoint 指定专属错误响应类型

可以实现，以 Redux Toolkit Query（RTK Query）场景为例，操作步骤如下：

• 先确保你已经定义了全局通用的基础错误类型，单个 endpoint 的专属错误类型需要继承该基础结构，避免全局类型和局部类型冲突。
• 定义 endpoint 时，在query/mutation的泛型参数中传入第四个参数，即为当前 endpoint 专属的错误类型，泛型参数的标准顺序为：请求成功返回值类型、请求入参类型、标签类型、错误类型覆写。

示例代码如下：

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

// 全局通用基础错误类型
interface CommonBaseError {
  code: number
  message: string
}

// 登录接口专属错误类型，继承通用基础错误
interface LoginSpecificError extends CommonBaseError {
  extra: {
    remainingLoginAttempts: number
    accountLockDuration: number
  }
}

// 登录接口入参类型
interface LoginParams {
  username: string
  password: string
}

// 登录接口成功返回值类型
interface LoginResult {
  token: string
  userInfo: {
    id: number
    nickname: string
  }
}

export const appApi = createApi({
  reducerPath: 'appApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    login: builder.mutation<LoginResult, LoginParams, string, LoginSpecificError>({
      query: (params) => ({
        url: '/auth/login',
        method: 'POST',
        body: params
      }),
      // 可选：单个 endpoint 专属的错误转换逻辑，和全局base query的错误处理互不影响
      transformErrorResponse: (baseQueryRes) => {
        const rawError = baseQueryRes.data as CommonBaseError
        return {
          ...rawError,
          extra: {
            remainingLoginAttempts: rawError.data?.left_attempts ?? 5,
            accountLockDuration: rawError.data?.lock_time ?? 0
          }
        } satisfies LoginSpecificError
      }
    })
  })
})

完成定义后，在组件中调用该接口时，返回的error对象会自动推断为你指定的LoginSpecificError类型，无需额外类型断言。

注意如果使用的是自定义封装的base query，需要确保自定义base query支持泛型覆写，官方默认的fetchBaseQuery原生支持该能力。

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