时间戳

首页 > 解决方案 > 如何在使用表单组件时在 apollo-client 中链接突变

apollo-client - 如何在使用表单组件时在 apollo-client 中链接突变

问题描述

阿波罗客户端 2.0。我正在使用链式突变组件。我正在尝试将第一个 Mutation 的返回值传递给第二个 Mutation。当单击表单组件上的 onSubmit 按钮时，我执行突变。第一个突变的返回值没有作为第二个突变中的“变量”之一传递

我在两篇非常相似的帖子中回顾了解决方案：如何在 React 中的 Apollo 客户端突变组件中包装 GraphQL 突变 以及如何将 Apollo 客户端中的突变链接在一起. 我认为我对表单的使用为我的解决方案增加了一些额外的复杂性。尽管传递的值（competitionId）在 handleOnSubmit 函数中可见（如果我在 handleOnSubmit 中的 createCompetition() 之后进行控制台日志），但它不会作为在 handleOnSubmit 中调用的第二个 Mutation 中的变量传递。结果是第一个突变成功执行，第二个突变出现 400 错误：“errors”:[{“message”:“Variable \“$competitionId\” of required type \“ID!\”没有提供。 ” 更具体地说， CompetitionId 的值在第一个突变运行后会传递给第二个突变，但它不会作为“变量”传递给作为参数传递给 handleOnSubmit 的 createMatch 函数。它看起来像“变量” 与 createMatch 函数一起传递给 handleOnSubmit，仅包括单击提交按钮时可用的变量。在单击提交按钮后生成竞争 ID，第一个突变将其作为结果返回。

handleOnSubmit = async(event, createCompetition, createMatch) => {
event.preventDefault();
await createCompetition();
await createMatch();
this.clearState();
this.props.history.push('/home');

}

render () {
const {location, name, action, caliber, rifleName, dateOf,competitionScore} = this.state;
const { matchNumber, targetNumber, relay, distanceToTarget, matchScore} = this.state;
return (
<div className="App">
  <h2 className="App">Add Competition</h2>
  <Mutation 
    mutation={CREATE_COMPETITION} 
    variables={{location, name, action, caliber, rifleName, dateOf, competitionScore}}
    refetchQueries={() => [
      { query: GET_ALL_COMPETITIONS, variables:{name: name}}
    ]}
    update={this.updateCache}>
    {(createCompetition, {data, loading, error}) => {

      if(loading) return <div>loading competition...</div>
      if(error) return <div>error: {error}</div>
      let competitionId;
      if(data) {
        competitionId = data.createCompetition._id;
      }
      return (
        <Mutation
          mutation={CREATE_MATCH}
          variables={{competitionId, matchNumber, targetNumber, distanceToTarget, matchScore}}>
          {(createMatch, {_, loading, error}) => {
            if(loading) return <div>loading match...</div>
            return (
              <form 
                className="form" 
                onSubmit={event => this.handleOnSubmit (event, createCompetition, createMatch)}>
                <label>  remaining form deleted for brevity

我希望 CompetitionId 的值作为变量传递给在 handleOnSubmit 方法中调用的 createMatch 函数。不提供。

标签： apollo-client

解决方案

如果（数据）在哪里，你应该在哪里返回第二个突变

推荐阅读