將嵌套的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”