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

Question

我正在尝试进行反应查询突变（使用 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（都是最新的发行版本）。

有人能指出我正确的方向吗？

Answer 1

useMutation第一个参数需要一个返回 Promise 的函数。这称为突变函数。您返回的不是一个承诺，而是一个空值。您需要使用 async/await 或从 axios 返回承诺。

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