如何让React+Apollo中GraphQL Mutation参数更符合DRY原则？

要解决参数重复定义和传递的问题，最彻底的方式是利用GraphQL Input类型封装参数，从根源上避免重复代码。下面是具体实现步骤：

1. 定义GraphQL Input类型（需后端配合） #

先在你的GraphQL Schema中定义一个输入类型，把所有更新用户的参数打包：

input UpdateUserInput {
  id: ID!
  someValue: String!
  someOtherValue: String!
}

如果后端已经定义好该Input类型，直接跳过此步骤。

2. 重构Mutation定义 #

用Input类型替换原来的零散参数，简化变量声明和字段调用：

const UPDATE_USER = gql`
  mutation UpdateUser($input: UpdateUserInput!) {
    updateUser(input: $input) {
      id
      name
    }
  }
`;

现在只需要声明一个$input变量，无需逐个列出每个参数。

3. 调整useMutation的变量传递 #

直接传入封装好的参数对象，新增参数时仅需给对象添加属性：

// 封装所有更新参数到一个对象
const updateUserParams = {
  id: 123,
  someValue: 'Hello',
  someOtherValue: 'World'
};

const [mutateUser] = useMutation(UPDATE_USER, {
  variables: { input: updateUserParams },
});

为什么这能解决DRY问题？ #

• 新增参数时，仅需在UpdateUserInput类型（后端）和updateUserParams对象（前端）中添加对应字段，无需修改Mutation的定义和变量映射逻辑。
• 彻底消除了原代码中“变量声明→字段参数映射”的重复环节，代码结构更简洁易维护。

如果暂时无法修改后端Schema，可在前端做临时封装（虽不如Input类型彻底）：提前定义参数对象，在Mutation中手动映射参数，但这种方式仍需在Mutation中逐个编写参数，仅能减少变量传递时的重复值输入，建议优先采用Input类型方案。

内容的提问来源于stack exchange，提问作者Arno van Oordt