如何在 axios 中使用 react-query 突变？答案

【问题标题】：How use react-query mutations with axios?如何在 axios 中使用 react-query 突变？
【发布时间】：2020-12-16 15:30:09
【问题描述】：

我正在尝试通过 axios 使用 react-query mutations，但是当我的请求返回 http 错误时，我的 catch() 没有被调用。

这是我尝试过的：

const BannerRightConfirmEmail = () => {
  const [{ token }] = useState<ITokenConfirmationEmailParam>(useParams());
  const [mutateConfirmEmail] = useMutation(confirmEmailUser);

  useEffect(() => {
    confirmEmail();
  }, []);

  const confirmEmail = async () => {
    try {
      await mutateConfirmEmail(token);
    } catch (errorReq) {
      console.log(errorReq);
    }
  };

我的user.service.ts：

const confirmEmailUser = async (token: string) => {
  await api.patch('/users/confirmEmail/' + token)
}

export { confirmEmailUser }

我的 api.ts：

const api = axios.create({
  baseURL: "http://localhost:3100",
});

我的请求返回 400 错误状态，但我的 catch() 中没有打印任何内容，为什么？

【问题讨论】：

您找到解决方案了吗？我也有同样的问题。
@Dirk 是的，你需要使用突变的 onSuccess/onError 事件，看这个使用突变的组件：github.com/veronesecoms/react-chat-front/blob/master/src/pages/…

标签： react-query

【解决方案1】：

mutate 函数处理异常，因此 catch 块永远不会运行。您可以使用onError 处理函数处理错误，该函数可以在钩子或变异函数级别上设置。例如：

const [
   mutate,
   { status, isIdle, isLoading, isSuccess, isError, data, error, reset },
 ] = useMutation(mutationFn, {
   onError(err, variables, onMutateValue) {
      // error handling logic
      // fires after the mutate-level handler
   }
 })
const promise = mutate(variables, {
   onError(err, variables, onMutateValue) {
      // error handling logic
      // fires before the hook-level handler
   }
 })

您也可以将mutationFn 中的错误处理逻辑移动到useMutation，如下所示：

const confirmEmailUser = async (token: string) => {
  let response;
  try {
    response = await api.patch('/users/confirmEmail/' + token)
  } catch (errorReq) {
    console.log(errorReq);
  }
  return response;
}

export { confirmEmailUser }

这样你就可以在错误到达react-query之前处理它

【讨论】：