为什么我的反应查询突变总是“成功”？答案

【问题标题】：Why is my react-query mutation always "successful"?为什么我的反应查询突变总是“成功”？
【发布时间】：2021-04-06 10:36:36
【问题描述】：

我正在尝试进行 react-query 突变（使用 axios，但如果我切换到 fetch API，我会得到相同的行为）。

我是这样设置的。

const mutation = useMutation(
    () => {
      axios.post("http://swapi.dev/api/foobar", {});
    },
    {
      onSuccess: () => {
        console.log("success");
      },
      onError: () => {
        console.log("error");
      },
    }
  );

URL 可以是任何失败的东西。我已经在我使用的真实 API 上进行了尝试，返回 500 和 404 错误。

我按如下方式触发突变。

mutation.mutate();

每次我在控制台中显示“成功”。 onError 处理程序永远不会触发。在 Chrome 的网络选项卡中查看时，调用会返回预期的错误（并显示控制台错误）。

我正在使用 react-query 3.3.6 和 axios 0.21.1（都是最新版本）。

谁能指出我正确的方向？

【问题讨论】：

标签： axios react-query

【解决方案1】：

useMutation 第一个参数需要一个返回承诺的函数。这被称为变异函数。你不是返回一个承诺，而是返回一个空洞。你会想要使用 async/await 或从 axios 返回承诺。

const mutation = useMutation(
  () => {
    return axios.post('http://swapi.dev/api/foobar', {})
  },
  {
    onSuccess: () => {
      console.log('success')
    },
    onError: () => {
      console.log('error')
    }
  }
)

【讨论】：