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

Posted 2023-03-08

【中文标题】是否可以将变量传递给 react-apollo 的“儿童”道具？

【英文标题】：Is there away to pass variables into the "children" props for react-apollo?

【发布时间】：2019-12-04 01:17:30

【问题描述】：

想知道是否有办法将额外的数据传递到 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>

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

【参考方案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 了解更多信息。

【讨论】：

太酷了，谢谢丹尼尔！我更新了 Mutation 以删除变量 prop 并将其与函数一起传递。将来我会尝试更深入地研究文档，有时很难找到我正在寻找的内容:)