在执行 Apollo 突变之前映射变量

Posted 2023-03-10

【中文标题】在执行 Apollo 突变之前映射变量

【英文标题】：Map variable before executing Apollo mutation

【发布时间】：2019-05-16 23:09:57

【问题描述】：

我一直在关注 this tutorial 以获得一个使用 Apollo 运行的 React 应用程序。

现在我正处于运行突变的步骤中，我已经成功完成了，但我正在尝试执行更复杂的突变。

因此，此突变中预期的字段之一是关系字段，需要 connect 数据集，该数据集必须类似于：

tags: 
  connect: [
   id: "cjoo9e0eq004d0824nibmtzl2"
  ,
  
   id: "cjoopece2000a0899n8jsjkr4"
  ,
  
   id: "cjozmqfal00040878t7huvb2s"
  ,
  
   id: "cjozmsquv000l0878y7t2zccm"
  ],
,

对于这个标签字段，我在前端显示了一个选择多选，因此该值将是一个 id 数组：["cjoo9e0eq004d0824nibmtzl2", "cjoopece2000a0899n8jsjkr4"...]。

由于突变期望该字段是具有 id 的对象数组，因此我试图以某种方式映射该字符串以将其转换为预期的格式，但我没有任何运气。在执行突变之前，我不知道在哪里可以转换该变量。

似乎是一个很难解释的问题，我希望解释足够清楚。

任何帮助将不胜感激！

编辑添加一些代码：

const CREATE_VIDEO_MUTATION = gql`
  mutation CreateVideoMutation($title: String!, $tags: [TagWhereUniqueInput!]) 
    createVideo(
      data: 
        title: $title, 
        tags: 
          connect: $tags
        
      
    ) 
      id
      title
    
  
`

class CreateVideo extends Component 
  state = 
    title: '',
    tags: [],
  

  render() 
    const  title, tags  = this.state;
    return (
        .....

      <select multiple 
        className="mb2" 
        value=tags
        onChange=e => 
          this.setState( tags: [...e.target.options]
            .filter((selected) => selected)
            .map((value) => value) )
        >
        tagsToRender.map(tag => 
          return (
            <option key=tag.id value=tag.id>
              tag.name
            </option>
          )
        )
      </select>

      <Mutation 
        mutation=CREATE_VIDEO_MUTATION 
        variables= title, tags 
        onCompleted=() => this.props.history.push('/')>
        createVideoMutation => <button onClick=createVideoMutation>Submit</button>
      </Mutation>

【问题讨论】：

在调用突变时执行此操作。 props.myMutation( variables: tags: connect: arrOfIds.map(id => (id)))

嘿凯尔，谢谢你的回答！变量被传递给突变组件中的突变：howtographql.com/react-apollo/3-mutations-creating-links 所以我不调用突变传递变量。这就是问题...

<Mutation mutation=POST_MUTATION variables= description, url > postMutation => <button onClick=postMutation>Submit</button> </Mutation> 你不是在那儿定义变量吗？我从来没有使用过这个，但看起来你会做我上面在你定义的突变组件中发布的内容。

我愿意，来自状态的变量： const tags = this.state;我看不到如何在突变调用完成之前映射标签

请发布您的突变组件的代码以及包含您正在使用的状态的组件。我们会弄清楚的。

【参考方案1】：

下面应该做。

const _tags = tags.map(tag => (id))

<Mutation 
    mutation=CREATE_VIDEO_MUTATION 
    variables= title, tags: _tags 
    onCompleted=() => this.props.history.push('/')>
    createVideoMutation => <button onClick=createVideoMutation>Submit</button>
  </Mutation>

【讨论】：

我之前做过类似的事情，但没有成功...我要再试一次

我可以看看TagWhereUniqueInput 长什么样子

刚刚尝试了您的解决方案，它奏效了！我认为我之前尝试过的那个是相似的，我没有发送 variables= title, tags: _tags 而是 variables= title, _tags 。无论如何。非常感谢，它有效:)

很高兴我们弄明白了！