GraphQL(Apollo)在JS中如何传递字典/对象作为Mutation参数？

我刚好之前也遇到过类似的需求，在Apollo（JS环境）里处理带大量参数的Mutation完全不用挨个传零散参数，通过**输入对象类型（Input Type）**配合JS对象传递就能搞定，既符合GraphQL规范，又能保持代码简洁。下面一步步来：

这一步是GraphQL强类型要求的核心，但其实写一次就够了，比维护十几个零散参数省心多了。比如你要创建一个带多字段的资源（比如用户信息），就定义一个对应的Input类型来打包所有参数：

# 定义输入对象，包含你需要的所有字段
input CreateUserInput {
  name: String!
  email: String!
  age: Int
  phone: String
  address: String
  # 继续添加你需要的10-20个字段...
}

# 定义使用这个Input的Mutation
type Mutation {
  createUser(input: CreateUserInput!): User # 返回你的实体类型，比如User
}

这里的CreateUserInput就是专门用来接收批量参数的容器，把所有相关字段都塞进去就行，后续要加字段也只需要在这里补充，不用修改Mutation的参数列表。

在JS这边，你只需要在Mutation查询里声明这个输入变量，然后直接传递一个JS对象作为参数，不用逐个拆解字段：

1. 编写Mutation查询 #

用gql模板字符串定义查询，指定变量类型为你的Input类型：

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

const CREATE_USER = gql`
  mutation CreateUser($input: CreateUserInput!) {
    createUser(input: $input) {
      id
      name
      email
    }
  }
`;

2. 调用Mutation并传递对象参数 #

在组件里使用useMutation钩子，调用时直接传入一个包含所有字段的JS对象即可：

function UserForm() {
  const [createUser] = useMutation(CREATE_USER);

  const handleSubmit = async (formData) => {
    // 假设formData是从表单收集的完整对象，包含name、email、age等所有字段
    try {
      await createUser({
        variables: {
          input: formData // 直接把整个对象传进去，不用逐个写参数
        }
      });
      console.log('用户创建成功');
    } catch (error) {
      console.error('创建失败:', error);
    }
  };

  // 表单渲染逻辑...
}

• 如果字段非常多，可以直接从表单、状态管理工具（比如Redux、Zustand）里提取完整对象，不用手动拼接，减少重复代码。
• 要是用TypeScript，可以通过GraphQL Codegen工具自动生成CreateUserInput对应的TS类型，写对象时能获得类型提示，避免字段拼写错误。

这样一来，你既不用在Mutation里写十几个零散参数，也符合GraphQL的规范，后续维护起来也方便——加字段只需要在Input类型里补充，客户端直接传对应字段就行。

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