NodeJS GraphQL: Implementing the GraphQL Mutations #4

In this section, youll learn how to add a mutation to the GraphQL API. This mutation will allow you to post new Person to the server.



The process of sending data to the server is called a mutation. Defining it is pretty similar to how you’ve defined the query.
In this section, you’ll learn how to add a mutation to the GraphQL API. This mutation will allow you to post new Human character to the server. In this tutorial, we will learn
  • How to write a mutation
  • We will add mutation to create Human object
  • We will add mutation to update Human object
  • We will add mutation to delete Human object

Let's get started!!
. . .

Extending the schema definition

We will add mutations to manipulate the Human object. In general, when adding a new feature to the API, the process will look pretty similar every time:
  1. Extend the GraphQL schema definition with a new root field ( in our case it will be mutation)
  2. Implement corresponding resolver functions for the added fields ( mutation )
This process is also referred to as schema-driven or schema-first development. So, let’s go ahead and tackle the first step, extending the GraphQL schema definition.
. . .

Adding createPerson Mutation

Let’s start by implementing a createPerson mutation that allows you to post a new Human character to the server, first, we will be adding proper fields to accept the mutation, then we will add the resolver function to resolve the mutation
1. Define Schema So, let’s go ahead and tackle the first step, extending the GraphQL schema definition by adding the createPerson mutation.


// #1
type Mutation {
// #2
createPerson(
// #3
id: Int!,
name: String!,
gender: String!,
height: Int!,
mass: Int!,
homeworld: String!
): Person
... more mutations
}
Let's walk through the comments to understand the code:
  1. First, we have defined our root Mutation
  2. We have defined the createPerson mutation that creates a new Human character and returns the same.
  3. We have defined the list of arguments which are required by the createPerson mutation

2. Implement resolver functions
The next step is to implement the resolver function for the createPerson mutation. In fact, one thing we haven’t mentioned yet is that not only root fields, but virtually all fields on the types in a GraphQL schema have resolver functions.


let Persons = [ { "name": "Luke Skywalker", "gender": "male", "height": "172", "mass": "77", "homeworld": "Tatooine", "id": 1 },
... more persons
]

// #1
Mutation: {
// #2
async createPerson(parent,args){
// #3
const newPerson={
id: args.id,
name: args.name,
gender: args.gender,
height: args.height,
mass: args.mass,
homeworld: args.homeworld
};
// #4
Persons.push(newPerson);
// #5
return newPerson;
},
... more mutations
}

Let’s walk through the numbered comments again:
  1. First, we have defined our root Mutation resolver
  2. We have added the resolver function to resolve the createPerson mutation, it receives input fields as arguments, passed by the use while calling createPerson mutation
  3. We have created the New Person object with parameters passed through the mutations
  4. We have added the newly created newPerson object to the Persons array
  5. We also returned the Person object which is just created
Go ahead and test the implementation by navigate to http://localhost:8080in your browser.

If you expand the documentation of the Playground, you’ll notice that another mutation called createPerson is now available.

Now its time to test our newly created mutation
. . .

Testing the mutation

Go ahead and restart your server so you can test the new API operations. Here is a sample mutation you can send through the Playground to create a new Person object on the server:
mutation {
createPerson(
id: 6,
name: "R2-D2",
gender: "n/a",
mass: 100,
height: 85,
homeworld: "Tatoonie"
) {
id
name
gender
homeworld
mass
height
}
}

The server response will look as follows, it will return the newly created Person object:
{
"data": {
"createHuman": {
"id": 6,
"name": "R2-D2",
"gender": "n/a",
"homeworld": "Tatoonie",
"mass": 100,
"height": 85
}
}
}
To verify that your mutation worked, you can send the Humans query from before again - it now returns the additional Human that you created with the mutation:

A newly created Person object is now available into the list of the all people.

We have not stored the data into the database, so it will not persist after the server restarted.
. . .

Update/Delete person Mutation

The way we have implemented the createPerson mutation, we can also implement the update mutation, as you can see in below image we also have two more mutations to update and delete the person object
Run the below Query into the GraphQL playground to update a Person on the server, it will update the person with the new data passed to the mutation
mutation {
updatePerson(
id: 6,
name: "R2-D2 Updated",
gender: "n/a",
mass: 110,
height: 85,
homeworld: "Tatoonie"
) {
id
name
gender
homeworld
mass
height
}
}


Run the below Query into the GraphQL playground to delete a Person on the server, it will delete the person with the given id
mutation {
deletePerson(id: 10)
}

You can play around with these mutations to manipulate the Person objects stored at the GraphQL server
. . .
In the next tutorial, we will learn how to handle the GraphQL errors into our Application.


Never miss a post from Gufran Mirza, when you sign up for Ednsquare.