React Redux：如何处理 RTK Queries/Mutation Typescript 中的错误？

Question

希望你们一切都好。

我将 Typescript 与 RTK 突变一起使用，一切正常，但如果我从后端以特定 json 格式发送任何错误，例如

{ 
   status: "Error",
   message "Something went wrong"
}

当我检查我的浏览器网络选项卡时，它会显示正确的错误响应，例如：

{
   data: { 
      status: "Error",
      message "Something went wrong"
    }
}

我在突变挂钩中遇到错误：

const [createCategory, {isLoading, error }] = useCreateCategoryMutation();

但我无法在我的反应中访问 error.data.message 它给我类型错误，如：

Property 'data' does not exist on type 'FetchBaseQueryError | SerializedError'.

Answer 1

此时，这可能是服务器错误 (FetchBaseQueryError) 或您编写的代码引发的任何错误（SerializedError，例如 query、queryFn, transformResponse 等) - 这可能有一个完全不同的形状。

要确保它是 FetchBaseQueryError，只需执行

if ('data' in error) {
  // TypeScript will handle it as `FetchBaseQueryError` from now on.
}

Answer 2

我在这里找到了 Phry 写的关于你问题的答案:) ,

如果您知道服务器返回的所有非 2xx 状态响应的格式，您可以直接转换

fetchQuery as BaseQueryFn<string | FetchArgs, unknown, YourErrorType, {}>.

React Redux: How to handle errors in RTK Queries/Mutation Typescript?