Apollo Client报错：传入parser的undefined非有效GraphQL DocumentNode

报错提示的含义是：传入GraphQL解析器的参数为undefined，不是合法的GraphQL DocumentNode格式。
你的代码存在两个会触发该问题的根因：

• clientMutations.js中定义DELETE_CLIENT常量时没有添加导出关键字，导致组件中import引入的DELETE_CLIENT实际值为undefined，传入useMutation后直接触发解析错误。
• 即使补全了导出，你对useMutation返回值的解构写法也是错误的：useMutation返回的是长度为2的数组，不是对象，用对象解构的方式拿deleteClient方法同样会得到undefined。

• 修改clientMutations.js，补全gql引入和DELETE_CLIENT的导出：

import { gql } from '@apollo/client';

export const DELETE_CLIENT = gql`
  mutation deleteClient($id: ID!) {
    deleteClient(id: $id) {
      id
      name
      email
      phone
    }
  }
`;

• 修改组件代码，修正useMutation的返回值解构，建议同时补全缓存更新/列表重查逻辑，避免删除操作后页面数据不刷新：

import { useMutation } from "@apollo/client";
import { DELETE_CLIENT } from "../mutations/clientMutations";
// 注意补全项目中用到的FaTrash图标引入，避免额外的组件未找到报错
import { FaTrash } from "react-icons/fa";

export default function ClientRow({ client }) {
  // 数组成员第一个是触发mutation的方法，第二个是包含loading、error、data的状态对象
  const [deleteClient] = useMutation(DELETE_CLIENT, {
    variables: { id: client.id },
    // 替换为你项目中获取客户端列表的query名称，删除后自动重刷列表
    refetchQueries: ["GetClients"]
  });

  return (
    <tr>
      <td>{client.name}</td>
      <td>{client.email}</td>
      <td>{client.phone}</td>
      <td>
        <button className="btn btn-danger btn-sm" onClick={deleteClient}>
          <FaTrash />
        </button>
      </td>
    </tr>
  );
}

修改完成后重启开发服务，清除浏览器缓存后报错就会消失。

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