React Query 的错误类型是什么以及如何处理不同的情况？

Question

我正在使用 React Query 和 typescript 来获取项目中的数据，并且我尝试使用 useQuery 挂钩返回的错误来显示描述错误的消息（如果存在），如下所示：

{isError && (error)? <p className=" text-[#ff0000] text-center font-semibold">{error?.response.data.message}</p> : null}

我遇到错误类型问题：

我该如何修复它，我在互联网上找不到任何内容，如果可能的话，任何人都可以解释如何使用反应查询处理不同的抛出错误，因为你可以在 JS/TS 中抛出任何内容

Answer 1

error默认为 typeunknown因为你queryFn可以抛出任何东西，这是 JavaScript 行为。throw 5会给你number作为你的错误类型。没有好的方法可以断言这一点，因此未知是最好的类型。这也是 TypeScript 自 v4.4 以来默认执行的操作（useUnknownInCatchVariables）

确保您的应用程序按您想要的方式运行的最佳方法是在运行时缩小类型。if (error instanceof Error)成功了，您就可以安全地访问error.message.

如果您使用的是axios，则类型实际上是AxiosError，并且 axios 有一个axios.isAxiosError(error)助手可以检查该类型并正确缩小类型。

另一种方法是为 useQuery 提供泛型：

useQuery<Todo[], AxiosError>(['todos'], fetchTodos)

但这很糟糕，原因如下：

1. 实际上有四个泛型，你只提供其中两个就删除了一堆功能
2. 无法保证您的错误确实是 axios 错误。例如，如果您使用select，并且其中发生运行时错误（由于某些错误的逻辑），您的错误将是“正常”错误Error，而不是 axios 错误。

唉，在 JS 中你可以抛出任何东西，unknown 是最正确的类型。

我还将在我的博客中详细介绍：

https://tkdodo.eu/blog/react-query-and-type-script