是否可以将变量传递给 react-apollo 的 "children" 道具？

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。

是否可以将变量传递给 react-apollo 的 "children" 道具？

Is there away to pass variables into the "children" props for react-apollo?

reactjs

graphql

react-hooks

react-apollo

apollo-client