Put Nested ReactJS values into GraphQL create mutation

Question

I presently have a page with a dynamically created form. I am having trouble understanding how to manipulate the state and GraphQL query to handle nested queries.

With my present implementation it does not seem to be able to create any new entries. I want to create 1 "target" with several sub "addr" tied to it in one mutation.

This is the state definitions:

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

Handler for Graph:

   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')
      }
    }

My create mutation

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

GraphQL datamodel

 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!]!
    }

How do I put my ReactJS state which has a nested array into GraphQL? PS:I am new to GraphQL and ReactJS.

EDIT: In playground im able to create my items but its not working in my actual application.

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"
  }
}

nickzor nickzor · Accepted Answer · 2019-03-15T11:19:45

Bro, you are one the right path. You just need to iterate your values in order to solve this problem. Once you iterate through the values you simply need to make a call to the new array which contains everything and it will work. As your values are nested you will need to add "{}" to your car variable and within that contain your connect since you wish to create new "addr" whilst connecting to existing "car".

 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')
      }
    }

Your values should now successfully pass into GraphQL and create targets with many "addr" whilst connecting to many "car"

Put Nested ReactJS values into GraphQL create mutation

1 Answers