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

Question

我在两篇非常相似的帖子中回顾了解决方案：如何在React中的Apollo客户机突变组件中包装GraphQL突变，以及如何在Apollo客户机中将突变链在一起。我认为我对表单的使用给我的解决方案增加了一些额外的复杂性。虽然传递的值（competitionId）在handleOnSubmit函数中是可见的（如果我在handleOnSubmit中的createCompetition（）之后进行控制台日志记录），但它不会在handleOnSubmit中调用的第二个变异中作为变量传递。结果是成功执行了第一个突变，而第二个突变出现了400个错误：“errors”：[{“message”：“variable\”$CompetitionId\“of required type\”id！\“was not provided.”更具体地说，在第一个突变运行后，CompetitionId的值会传递给第二个突变，但它不会作为“variables”传递给createMatch函数，作为参数传递给HandleOnSubmit.看起来像是随createMatch函数一起传递给handleOnSubmit的“变量”，只包括单击submit按钮时可用的变量。competitionId是在单击submit按钮后生成的，第一个突变作为结果返回它。

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函数。没有提供。

Answer 1

看来你需要的是嵌套的突变：思维脸；

问：你在使用Prisma吗？

在GraphQL中，您可以通过一个突变来创建节点，如果您的类型是相关的，这很简单，所以我假设这就是您的情况。

type Competition {
  id: ID! @unique
  name: String!
  match: Match! @relation(name: "CompetitionMatch")
}

type Match {
  id: ID! @unique
  name: String!
  campetition: Competition! @relation(name: "CompetitionMatch")
}

type Mutation {
  createCompetition (name: String! match: MatchInput): Competition
}

input MatchInput {
  name: String!
}

现在，当您调用createCompetity突变时，您必须发送匹配数据，如下所示：

mutation createCompetition (
 name: 'Loremp competition'
 match: { name: 'child match'}
) {
 id
 name
 match {
  id
  name
 }
}

参考:https://www.graph.cool/docs/reference/graphql-api/mutation-api-ol0yuoz6go/#nested-create-mutations

希望能有所帮助！