在NextJS中使用自定义Apollo Mutation Hook时遇TypeError求助

问题根源 #

你的useLoginAdmin自定义钩子没有返回useMutation的执行结果，导致组件调用该钩子时拿到的是undefined。而你试图用数组解构语法const [onLogin, { loading }] = ...去获取mutate函数和状态，自然会抛出TypeError: undefined is not iterable——因为undefined不是可迭代的数组类型。

修复方案 #

修改useLoginAdmin钩子，让它返回useMutation的返回值（useMutation本身会返回一个包含mutate函数和状态对象的数组）：

import { gql, useMutation } from "@apollo/client";

const LOGIN_ADMIN_USER_MUTATION = gql`
  mutation loginAdminUser($input: LoginAdminUserInput!) {
    loginAdminUser(input: $input) {
      user {
        id
        companyID
        token
      }
    }
  }
`;

export const useLoginAdmin = (options = {}) => {
  // 关键：透传useMutation的返回数组
  return useMutation(LOGIN_ADMIN_USER_MUTATION, options);
};

额外优化（可选） #

组件中的onCompleted回调参数存在小问题：Apollo的onCompleted接收的data就是mutation返回的直接数据，并非嵌套的data对象。可以调整回调逻辑以正确获取用户信息：

const [onLogin, { loading }] = useLoginAdmin({
  onCompleted: (data) => {
    // 直接访问mutation返回的loginAdminUser字段
    console.log(data.loginAdminUser.user);
  }
});

核心逻辑说明 #

useMutation是Apollo Client提供的自定义钩子，它会返回一个数组：

• 第一个元素是触发mutation的函数（即你要的onLogin）
• 第二个元素是包含loading、error等状态的对象

你的自定义钩子必须把这个返回值传递出去，组件才能通过数组解构拿到需要的内容。

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