React native + React -query + onError不捕获和处理错误?

Question

我使用react query作为数据处理程序。我对react native和react query都很陌生。

现在我真的不明白为什么onError回调不处理我的错误。错误回调由错误触发，仍然进入函数中的catch处理程序(我不想拥有)。

我有以下设置/结构:

Axios在API层。不试着接。UseMutation设置，mutationFn指向axios API请求。ClickHandler触发一个执行突变的函数。

const mutation = useMutation({
mutationFn: (req: TimeReportRequest) => {
return updateTimeReport(timeReport?.id!, req);
},
onSuccess: (data) => {
queryClient.invalidateQueries({ queryKey: ['timeReports'] });

},
onError: (error) => {
console.log('Im the error and i should not go further');
errorMessageHandler(error);
},
});
const onSubmitTimeReport = () => {
try {
if (!timeReport) return;
const req: TimeReportRequest = {
...
};
mutation.mutate(req);
} catch (error) {
console.log("im will recieve the error. But i shouldn't?. Error is not handled as a normal try-catch")
}

};

主要问题是错误没有得到正确的处理。如果我删除react查询，只使用api层(axios方法)直接尝试捕获一切工作如预期。

我在这里错过了什么?

Answer 1

我将自己回答这个问题，因为这里的主要问题是两件事:

• react native和yellow box如何与react query一起工作
• 如何响应查询气泡事件

react native, react query(在我的例子中是expo)的第一件事是，所有错误码>300将显示为黄色框中的警告。我不知道这个，这只是一个开发警告。另外，如果你想运行一个演示或一些不应该显示警告的东西，比如当API请求返回400时，你可以禁用yellowbox来避免不必要的问题。

第二是react query onError不会"catch"这个错误。它更像是一个中间件，让你有机会在出错时做一些事情。

所以在很多情况下你可以选择"catch"在onError方法中处理错误或者在try catch中包装整个调用。或者在某些情况下，您可能需要两者。

Answer 2

不使用Try catch捕获错误。尝试mutation.mutate(req, {onError: ()=> {});这里有一个更好的方法来编写突变，而不是在创建钩子时传递onError函数，你可以在使用钩子的任何地方传递错误处理程序。

import type {
MutationFunction,
UseMutationOptions,
} from '@tanstack/react-query';
import { useMutation } from '@tanstack/react-query';
import type { AxiosError, AxiosResponse } from 'axios';
const mutationFn: MutationFunction<AxiosResponse<Response>, Request> = ({
...data
}) =>
client.post(`/url`, createFormData(data));
export const useCustomHook = (
config?: UseMutationOptions<AxiosResponse<Response>, AxiosError, Request>
) =>
useMutation<AxiosResponse<Response>, AxiosError, Request>(
(data) => mutationFn(data),
config
);

在应用程序的任何部分使用此钩子

const { mutate } = useCostumHook({
onSuccess: () => {
Alert.alert('Success', 'updated successfully');
},
onError: () => {
Alert.alert('Error', 'Something went wrong');
},
});

我希望这对你有帮助