为什么我的反应查询突变总是 "successful"？

Question

我正在尝试进行反应查询突变（使用 axios，但如果我切换到获取 API，我会得到相同的行为）。

我是这样设置的

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

URL 可以是任何失败的东西。我已经在我正在使用的真实 API 上试过了，return 出现了 500 和 404 错误。

我如下触发突变。

mutation.mutate();

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

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

任何人都可以指出正确的方向吗？

Answer 1

useMutation 第一个参数需要一个 return 承诺的函数。这被称为突变函数。你 return 不是 return 一个承诺，而是一个空洞。您需要使用 async/await 或 return 来自 axios 的承诺。

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

为什么我的反应查询突变总是 "successful"？

Why is my react-query mutation always "successful"?

axios

react-query