具有动态电子邮件地址数量的 Apollo Graphql 突变答案

【问题标题】：Apollo Graphql mutation with dynamic number of email address具有动态电子邮件地址数量的 Apollo Graphql 突变
【发布时间】：2017-09-02 14:17:18
【问题描述】：

我已经成功创建了一个允许我创建员工记录的 graphql 突变。

mutation addNewStaff {
  createStaff(input: {
    first_name: "Test Name"
    last_name: "Lname"
    nickname: "Nname"
    positionId: 10
    divisionId: 6
    contact_numbers: [
      {number: "66643535"}
      {number: "876876867"}
    ]
    emails: [
      {address: "testuser@gmail.com"}
      {address: "gfdsaasd@gmail.com"}
    ]
    office_location: "OP" 
  }) {
    id
    first_name
    last_name
  }
}

结果是

{
  "data": {
    "createStaff": {
      "id": "16",
      "first_name": "Test Name",
      "last_name": "Lname"
    }
  }
}

电子邮件和联系号码是动态字段，这意味着员工可以拥有无限数量的电子邮件和联系号码（这些都存储在单独的数据库表中，外键指向员工表）。我现在正在使用 react 和 apollo 客户端为这个项目编写前端代码。我对如何编写用于创建突变的 gql 代码感到非常困惑。我找不到一个很好的例子来说明我想要完成的事情。有人可以指导我如何做到这一点吗？

【问题讨论】：

Graphql with nested mutations?的可能重复
不，我的担忧有所不同。我已经在服务器端实现了突变。上面的代码适用于 graphiql。我现在想知道如何在客户端使用 apollo / gql 进行操作。

标签： reactjs graphql apollo graphql-tag

【解决方案1】：

您可以为您的变异创建不同的变量，例如：

import gql from 'graphql-tag'

export const addNewStaffMutation = gql`
    mutation addNewStaff(
            $firstName: Sting!, 
            $lastName: String!,
            ...
            $positionId: number!, 
            $divisionId: number!, 
            ...) {
      createStaff(input: {
        first_name: $firstName
        last_name: $lastName
        nickname: "Nname"
        positionId: $positionId
        divisionId: $divisionId
        contact_numbers: [
          {number: "66643535"}
          {number: "876876867"}
        ]
        emails: [
          {address: "testuser@gmail.com"}
          {address: "gfdsaasd@gmail.com"}
        ]
        office_location: "OP" 
      }) {
        id
        first_name
        last_name
      }
    }
`

我只替换了示例中的一些参数，因为您的有效负载非常大。

然后您可以构建您的react 组件并传递所有变量。您可以在Apollo Mutations 上阅读更多相关信息并查看一些示例。

【讨论】：