GraphQL

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.

Founder @ednsquare | Continiously Designing Testing Coding at ednsquare | Any query? shoot an email at ednsquare@gmail.com

Published · May 4 2020

Previous tutorial: Writing the GraphQL Query and Resolvers #3

Starting boilerplate code for this chapter can be found Github

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:
Extend the GraphQL schema definition with a new root field ( in our case it will be mutation)
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.

//nodejs-graphql-part-4/after/typeDefs.js#L21

// #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:
First, we have defined our root Mutation
We have defined the createPerson  mutation that creates a new Human character and returns the same.
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.

// nodejs-graphql-part-4/after/resolvers.js#L58

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:
First, we have defined our root Mutation resolver
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
We have created the New Person object with parameters passed through the mutations
We have added the newly created newPerson object to the Persons array
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.
Up next:  Handling GraphQL Errors in NodeJS #5

Final code for this chapter can be found Github