React Query useMutation报错：解决Symbol.iterator缺失问题

我跟着Tanner的React Query教程，按对应仓库提交顺序从useEffect+普通fetch迁移到React Query时，碰到了如下类型错误：

Type 'UseMutationResult<void, unknown, void, unknown>' must have a 'Symbol.iterator' method that returns an iterator.

错误出在使用自定义hook useCreateTransaction 的时候，该hook代码如下：

import { useMutation, useQueryClient } from "react-query";

export default function useCreateTransaction() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: async (values) => {
      const res = await fetch("/api/transactions", {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
        body: JSON.stringify(values),
      });
      // const data = await res.json();
      // return data;
    },
    onSuccess: (data) => {
      queryClient.invalidateQueries("transactions");
      // return [createTransaction]
    },
  });
}

我尝试用数组解构获取hook返回值：

const [createTransaction, { status: createTransactionStatus }] =
    useCreateTransaction();

想通过createTransaction执行服务端状态变更，结果触发了上述错误。我的技术栈为：客户端AstroBuild，数据库PlanetScale，后端Cloudflare Functions。

问题原因 #

这是React Query版本差异导致的：

• React Query v3中，useMutation返回的是数组，支持[mutate, mutationObj]这种数组解构写法
• React Query v4+中，useMutation返回的是单个对象，不能用数组解构，必须用对象解构

解决方法 #

方法1：适配v4+写法（推荐）

直接修改调用处的解构方式，从数组解构改成对象解构，把返回对象里的mutate重命名为你需要的createTransaction：

const { mutate: createTransaction, status: createTransactionStatus } = useCreateTransaction();

方法2：兼容v3写法（不推荐）

如果想保留数组解构的习惯，可以在自定义hook里把useMutation的返回值包装成数组：

import { useMutation, useQueryClient } from "react-query";

export default function useCreateTransaction() {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationFn: async (values) => {
      const res = await fetch("/api/transactions", {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
        body: JSON.stringify(values),
      });
      // 建议恢复这部分代码，拿到返回数据
      const data = await res.json();
      return data;
    },
    onSuccess: () => {
      queryClient.invalidateQueries("transactions");
    },
  });
  // 包装成数组返回，适配v3解构逻辑
  return [mutation.mutate, mutation];
}

另外建议把mutationFn里注释掉的res.json()和返回逻辑恢复，这样onSuccess里能拿到服务端返回的交易数据，方便后续业务处理。

内容的提问来源于stack exchange，提问作者shtepa