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.
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: "mickey@mouse.com"
}
addresses: [{
street: "A street"
city: "A city"
country: "A country"
contacts: [{
name: "Mickey"
email: "mickey@mouse.com"
phone: "+1 23456789"
}]
}, {
street: "B street"
city: "B city"
country: "B country"
contacts: [{
name: "Minney"
email: "minney@mouse.com"
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: "mickey@mouse.com"
},
addresses: [{
street: "A street"
city: "A city"
country: "A country"
contacts: [{
name: "Mickey"
email: "mickey@mouse.com"
phone: "+1 23456789"
}]
}, {
street: "A street"
city: "A city"
country: "A country"
contacts: [{
name: "Minney"
email: "minney@mouse.com"
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.