reactjs React Query的错误类型是什么?如何处理不同的情况?

ioekq8ef  于 2022-12-18  发布在  React
关注(0)|答案(3)|浏览(164)

我正在使用React Query with typescript来获取项目中的数据,并且尝试使用useQuery钩子返回的错误来显示描述错误的消息(如果存在的话),如下所示:

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

我遇到错误类型的问题:

我怎么能修复它,我找不到任何在互联网上,如果可能的话,任何人都可以解释如何处理不同的抛出错误与React查询,因为你可以抛出任何在JS/TS

9jyewag0

9jyewag01#

error默认为类型unknown,因为您的queryFn可以抛出任何东西,这是一个javascript行为。throw 5将为您提供number作为您的错误类型。没有好的方法来Assert,所以unknown是最好的可能类型。这也是TypeScript从v4.4(useUnknownInCatchVariables)开始默认做的事情。
确保您的应用按照您的意愿运行的最佳方法是在运行时缩小类型范围。if (error instanceof Error)可以实现这一点,您可以安全地访问error.message
如果你使用的是axios,那么类型实际上是AxiosError,axios有一个axios.isAxiosError(error)帮助器来检查这个类型,并正确地缩小类型。
另一种方法是为useQuery提供泛型:

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

但这是不好的,有几个原因:
1.实际上有四个泛型,而您只提供其中两个就可以删除一堆特性
1.没有人能保证你的错误一定是一个axios错误,例如,如果你使用select,一个运行时错误发生在那里(因为一些错误的逻辑),你的错误将是一个“正常的”Error,而不是一个axios错误。
唉,因为你可以在JS中抛出任何东西,unknown是最正确的类型。
我也会在我的博客中介绍更多细节:
https://tkdodo.eu/blog/react-query-and-type-script

6qftjkof

6qftjkof2#

我遇到了与Typescribe和react-query相同的问题,相同的错误Object is of type 'unknown'.
安装这个devDependency“@types/react-query”在某种程度上帮助了我。我正在使用VS代码编辑器,我认为这有助于类型建议。这可能会有帮助。
npm i --save-dev @types/react-query

mcdcgff0

mcdcgff03#

正如@TkDodo所指出的,您可以为useQuery提供泛型,但这是不值得的,因为您也将失去Type推断。
但是,作为一种解决方法,我添加了onError回调函数,并输入它的error参数。TypeScript会将该错误的类型推断为我所期望的useQuery类型。
注意,我对所有用来格式化和抛出自定义错误的请求都使用Axios请求和响应拦截器。
例如...

interface IPayload {
  someKey: string; // ETC
}

// The type of error expected from the response (also formatted by interceptor).
interface IApiError {
  message: string;
  description: string;
  statusCode: string | number;
}

export const useMyQuery = (payload: IPayload) => {
  const { data, isLoading, isError, error, refetch } = useQuery({
    queryKey: ['some', 'query-keys'],
    queryFn: () => API.fetchMyData(payload),
    // This does the trick
    onError: (err: IApiError) => err,
  });
};

相关问题