react-query mutateAsync 中的错误处理答案

【问题标题】：Error handling in react-query mutateAsyncreact-query mutateAsync 中的错误处理
【发布时间】：2021-09-10 22:07:05
【问题描述】：

我正在学习react-query，我想在useMutation API 中使用mutateAsync。这是我的代码：

import { useMutation } from "react-query";

const asyncCall = () => {
  return new Promise((resolve, reject) =>
    setTimeout(() => reject("reject"), 1000)
  );
};

const Home = () => {
  const { mutateAsync } = useMutation(asyncCall);

  const handleClick = async () => {
    try {
      const res = await mutateAsync();
    } catch (err) {
      console.log("catch error"); // output: catch error
    }
  };

  return (
    <div>
      <button onClick={() => handleClick()}>Click</button>
    </div>
  );
};

export default Home;

现在我的代码可以成功捕获来自asyncCall 的错误返回，但我在控制台中看到警告：

详情：

所以它说错误来自handleClick 函数，但我认为try...catch 已经处理了错误？为什么会有警告？我该如何解决？

我做了一个演示here。

谢谢！

【问题讨论】：

标签： reactjs async-await react-query

【解决方案1】：

默认情况下，react-query 会将所有错误记录到控制台。如果你不想这样，你可以覆盖setLogger:https://react-query.tanstack.com/reference/setLogger

import { setLogger } from 'react-query'

setLogger({
  log: console.log,
  warn: console.warn,
  error: () => {}, // do nothing
})

【讨论】：