反应查询 mutateAsync 中的错误处理

Question

我正在学习 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 的错误 returns，但我在控制台中看到警告：

详情：

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

我做了一个演示here。

谢谢！

Answer 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
})

反应查询 mutateAsync 中的错误处理

Error handling in react-query mutateAsync

async-await

reactjs

react-query