如何将变量传递给 Apollo Mutation 组件？答案

【问题标题】：How to pass variables to an Apollo Mutation component?如何将变量传递给 Apollo Mutation 组件？
【发布时间】：2023-03-15 01:34:01
【问题描述】：

自 2.1 版以来，Apollo Client 使用 React 的渲染道具模式。

官方Apollo Client documentationvariables作为参数传递给变异函数：

addTodo({ variables: { type: input.value } });

然而各种教程，包括How to GraphQL，将它们作为道具传递：

<Mutation mutation={POST_MUTATION} variables={{ description, url }}>

选择一种方式或另一种方式的原因是什么？

【问题讨论】：

它们不是相互排斥的。当您调用在渲染道具中传递给您的 mutate 函数时，可以覆盖作为道具传递的变量，因此您可以将第二种形式视为提供默认值。在实践中，我从未使用过第二种形式，我通常发现自己将 Mutation 组件包装在一个表单周围，并在提交表单时调用 mutate 函数。但是，当事先知道这些变量并且不需要或已知用户输入时，将变量作为 props 传递可能会有一些用处，例如注销突变或“喜欢”操作。

【解决方案1】：

您可以安全地使用任何一种将变量传递给突变的方法。

大多数时候我会使用 variables 属性来设置变量，因为这非常清晰和整洁。

您可能想要使用其他方法的一个实例是从子组件调用突变方法时 - 其中变量也包含在该子组件中。

继续上面给出的示例代码：想象一下 ToDo 列表中的一个组件数组，其中每个组件都有一个输入，但调用一个突变（位于父组件中）。从每个子组件内部调用突变会更容易，例如：

updateToDoItem({variables: {id: this.props.id, text: this.state.text}})

【讨论】：