将嵌套的ReactJS值放入GraphQL创建突变

Question

我目前有一个带有动态创建表单的页面。 我在理解如何操纵状态和GraphQL查询以处理嵌套查询时遇到麻烦。

在我目前的实现中，它似乎无法创建任何新条目。 我想创建1个“目标”，并在一个突变中将多个子“ addr”绑定到该目标。

这是状态定义：

state = {
    name:'',
    addr:[{
    mobilepkg:'',
    target_url:'',  
    target_ip: '',
    idCars:[]
    }],
    category:'',
    date: '',
    location:''
  }

图处理程序：

   handleTarget = async e => {
        e.preventDefault()
        const { name,
        target_url,
        target_ip,category,
        mobilepkg,date,location } = this.state
        let idCars = this.state.idCars
        let adras = this.state.addr
        await this.props.createTargetMutation({
          variables: {
            data: {

          name,
        addr:{
        create:
        [{
          target_url,
          target_ip,
          mobilepkg,
         cars: {
                connect: idCars
              },

        }]
        },
        date,
        location,

              category
            }
          }
        })

        this.props.history.replace('/targets')
      }
    }

我的创造突变

const CREATE_DRAFT_MUTATION = gql`
 mutation CreateTargetMutation($data: TargetCreateInput!) {
    createTarget(data: $data) {
    id
    name
    addr
    category
    }
  }
`

GraphQL数据模型

 type Target {
      id: ID! @unique
      name: String!
      addr: [Addr!]! 

      category: String!
      date:String!
      location:String!
    }

    type Addr {
      id: ID! @unique
      target_url:String!
      target_ip:String!
      mobilepkg:String!
      cars: [Car!]!
    }

如何将我的具有嵌套数组的ReactJS状态放入GraphQL？ PS：我是GraphQL和ReactJS的新手。

编辑：在操场上我无法创建我的项目，但它不能在我的实际应用程序中工作。

mutation CreateTargetMutation($data: TargetCreateInput!) {
    createTarget(data: $data) {
    id
    name
    addr{
        target_ip
        target_url
        mobilepkg
    cars{
     id
    }
    }
    category
    date
    location
    }
  }

{
  "data": {
    "name":"testerquery",
    "addr":  {
      "create": {
      "target_ip":"123",
        "target_url":"123",
        "mobilepkg":"asd",
    "cars":{"connect":{"id":"cjs3yd83u004a0781jffzaqqr"}}
    }
    },
    "category":"simple",
    "date":"2019-03-12",
    "location":"kl"
  }
}

Answer 1

兄弟，你是正确的道路之一。 您只需要迭代您的值即可解决此问题。 遍历值之后，您只需要调用包含所有内容的新数组即可使用。 嵌套值时，您需要在汽车变量中添加“ {}”，并在其中包含连接，因为您希望在连接到现有“汽车”的同时创建新的“ addr”。

 let create = []
        for(let i=0; i < this.state.addr.length; i++){
                create.push({
                    'mobilepkg':this.state.addr[i].mobilepkg,
                    'target_url':this.state.addr[i].target_url,
                    'target_ip':this.state.addr[i].target_ip,
                    'cars': {
                    'connect':  this.state.addr[i].cars}
                })
    }

      await this.props.createTargetMutation({
          variables: {
            data: {
         name,
         addr:  {
        create
        },
        category,
        date,
        location
            }
          }
        })
        this.props.history.replace('/targets')
      }
    }

您的值现在应该成功传递到GraphQL并创建具有许多“ addr”的目标，同时连接到许多“ car”