RTK Query如何排除error中的SerializedError并为单个查询声明错误类型

默认情况下RTK Query返回的error是 FetchBaseQueryError | SerializedError | undefined 联合类型，其中SerializedError是JS原生错误序列化后的类型，没有status、data等接口响应错误属性，直接访问会触发TS类型校验失败。

RTK Query内置了isFetchBaseQueryError类型守卫函数，调用后TS会自动将error类型收窄为FetchBaseQueryError，即可正常访问对应属性，修改后的代码如下：

import { isFetchBaseQueryError } from '@reduxjs/toolkit/query/react'

function PostsList() {
  const { data, error } = useGetPostsQuery()

  return (
    <div>
      {error && isFetchBaseQueryError(error) && (
        <>{error.status} {JSON.stringify(error.data)}</>
      )}
    </div>
  )
}

如果需要给单个查询指定固定结构的错误类型，可以在定义endpoint时通过transformErrorResponse配置实现，示例如下：

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

// 自定义业务错误结构
interface PostApiError {
  code: number
  message: string
  requestId: string
}

export const postApi = createApi({
  reducerPath: 'postApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getPosts: builder.query<Post[], void>({
      query: () => '/posts',
      // 转换错误响应并指定类型
      transformErrorResponse: (res: FetchBaseQueryError) => {
        return res.data as PostApiError
      }
    })
  })
})

export const { useGetPostsQuery } = postApi

配置完成后，调用useGetPostsQuery返回的error类型会自动变为 PostApiError | SerializedError | undefined，配合类型守卫即可直接访问自定义的错误字段。

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