是否可以将变量传递给 react-apollo 的“儿童”道具？

Question

想知道是否有办法将额外的数据传递到 UI 触发突变的函数中。请参阅下面的示例。

        <Mutation 
            mutation={COMPLETE_EVALUATION}
            variables={{studentId:courses.course.studentId, courseId: courses.course.courseId, passed:true, checkpoints:courses.evals}}>
             {(completeEval, {error, loading}) => (
                <div className="competency-actions ml-32 mr-64">
                    <Button className="w-128 mr-16 pass-button" variant="contained" onClick={() => completeEval(true)}>
                        PASS
                    </Button>
                    <Button className="w-128 ml-16 fail-button" variant="contained" onClick={() => completeEval(false)}>
                        REMEDIATE
                    </Button>
                </div>
            )} 
        </Mutation>

我想根据单击的按钮为突变提供更多信息。我是走在正确的道路上还是有其他方法可以完成设置该值？

Answer 1

传递给Mutation 组件的render props 函数的第一个参数是mutate 函数。这个函数可以在没有额外参数的情况下调用，但它也可以接受一个选项对象。此选项对象可以具有以下属性：

• variables
• optimisticResponse
• refetchQueries
• update

这些选项与可以直接传递给Mutation 组件的道具相同。事实上，如果通过 mutate 函数提供了一个选项，如果也提供了一个选项，它将覆盖其对应的 Mutation 组件属性。

这意味着您可以省略组件中的 variables 属性，而是在调用 mutate 函数时传入变量：

completeEval({
  variables: {
    studentId:courses.course.studentId,
    courseId: courses.course.courseId,
    checkpoints:courses.evals,
    passed: true,
  }
})

请参阅docs 了解更多信息。