How to create nested nodes in one mutation?

Question

Hi I am trying to write data on my https://www.graph.cool/ db with a mutation. My project is a React web-app and I am using Apollo as graphql client and graphql-tag npm package as template literal parser.

The problem is that i don't know how to arrange the gql template string for the correct mutation with nested data. My schema looks like this, for example note the field "Addresses" for the type "Company" is an array of "Address" objects type.

type Company {
  name: String!
  website: String
  Owner: User
  Addresses: [Addresses]
}

type User {
  name: String!
  email: String
}

type Address {
  street: String!
  city: String!
  country: String
  contacts: [Contact]
}

type Contact {
  name: String
  email: String
  phone: String
}

For example, I want to create a new company, its new owner and multiple addresses at the same time in one mutation. For the addresses I need to create a new contact as well.

Answer 1

You can make use our so called nested mutations to accomplish that. First of all, let's see how we can do it from the GraphiQL playground:

mutation createNestedCompany {
  createCompany(
    owner: {
      name: "Mickey"
      email: "[email protected]"
    }
    addresses: [{
      street: "A street"
      city: "A city"
      country: "A country"
      contacts: [{
        name: "Mickey"
        email: "[email protected]"
        phone: "+1 23456789"
      }]
    }, {
      street: "B street"
      city: "B city"
      country: "B country"
      contacts: [{
        name: "Minney"
        email: "[email protected]"
        phone: "+9 87654321"
      }]
    }]
  ) {
    id
    owner {
      id
    }
    addresses {
      id
      contacts {
        id
      }
    }
  }
}

Note that the createCompany mutation has the object argument owner and the list object argument addresses. addresses has a nested contacts list object argument.

Using Apollo Client, we specify input arguments with GraphQL variables, so let's see how it looks in this case:

const createNestedCompany = gql`
  mutation createNestedCompany(
    $owner: CompanyownerUser
    $addresses: [CompanyaddressesAddress!]
  ) {
    createCompany(
      owner: $owner
      addresses: $addresses
    ) {
      id
      owner {
        id
      }
      addresses {
        id
        contacts {
          id
        }
      }
    }
  }
`

When calling the mutation with Apollo, we now have to specify the variables as an object:

const variables = {
  owner: {
    name: "Mickey"
    email: "[email protected]"
  }, 
  addresses: [{
    street: "A street"
    city: "A city"
    country: "A country"
    contacts: [{
      name: "Mickey"
      email: "[email protected]"
      phone: "+1 23456789"
    }]
  }, {
    street: "A street"
    city: "A city"
    country: "A country"
    contacts: [{
      name: "Minney"
      email: "[email protected]"
      phone: "+9 87654321"
    }]
  }]
}

and call the mutation with the variables:

this.props.createNestedCompany({ variables })
  .then((response) => {
    console.log('Company, owner and addresses plus contacts created');
  }).catch((e) => {
    console.error(e)
  })

The variable types CompanyownerUser and [CompanyaddressesAddress!] depend on a combination of the multiplicity (to-one; to-many), the related models (Company and User; Company and Address) and the related fields (owner; addresses). You can find all type names in the GraphiQL playground docs when you navigate to the createCompany mutation.