Mutation in GraphQl and how to perform Create,Update and Delete(Part 3)

Hello Readers and welcome to another article of the series in Mastering Graphql, if you are reading this on a continuous then thank you, and if you are new to this article then I would like you to visit and read the previous parts of the series here.

Now, let us shift our focus to how to create, update and delete a particular data in graphql using the mutation keyword, as we had learned from the previous article graphql is a query language, and to get a particular data we use the query keyword, we have also seen what the use of aliases and arguments.

Mutation:

Most discussions of GraphQL focus on data fetching, but any complete data platform needs a way to modify server-side data as well.

And there comes mutation, as the name suggests, mutation generally refers to the changes, and in graphql mutation is the keyword that is used for mutating the data, which is similar to POST, DELETE and PATCH requests in REST.

Now let us look at each of the examples one by one, such as creating, updating and deleting data using mutation

Create Data using mutation:

Let's now once again head back to our Apollo Studio and the example of adding a post which we discussed in the previous parts, but before moving forward let us see the structure of our mutation, which we going to use to create a post.

you can see that the structure for the creation of a post is what we get as a response.

But, In general, in Apollo Studio you also have to pass the required variable to create a post in this case the post and addPostInput are the type that we have to include in our typeDefs folder which we created during our server creation

//tpeDefs.js
type Mutation {
//addPost is the mutation which returns a particular Post
addPost(post:addPostInput!):Post!
} 

input addPostInput{
  image: String!
  description: String!
  //you can more fields
}
//Furthermore this mutation and add Post need to be resolved in resolvers.js

//resolvers.js
Mutation :{
//you can use the async function as well for error handling
 addPost: (_,args)=>{
       //this is your request which the user sends and post is a variable
       const {image,description}=args.post
        //your logic for handling and validating the request and 
        //save the data in the particular Database
        //e.g. for MongoDB, you can use Models to save the data
    },
}

we can see, how the data is created using mutation and arguments passed as a variable, such as the Apollo studio responds with data that we have created.

Delete Data using mutation:

Deleting data in the graphQL is somewhat similar to what we do in the REST API, in this for deleting a particular data you can pass the argument to a mutation similar to what we did in creating data, but instead, the argument field needs to be a unique value for identifying the particular data or object.

let us now see an example of deleting a post, with a unique postId

//typeDefs.js
type Mutation {
//id represents a unique value for a particular data
deletePost(id:ID!):Post!
}   
// mutation and query which we create in typeDefs needs 
//to be resolved inside  resolvers.js

//resolvers.js
//you can use the async function as well for error handling
deletePost: (_,args)=>{
       //extract the unique value passed through an argument using a variable
        const {id} = args
       //your inside logic for validating a request and deleting a post
      // e.g. in case of MongoDB we use findbyIDAndDelete(id)
      //Return the deleted post or a response
    }

Let us now actually, see how it works in Apollo Studio, how we pass the argument to delete a post, below is a variable as deletePostId the id of the post which we want to delete

Update Data using Mutation:

Updating data in graphql is also similar to REST, but unlike REST which has both the requests such as PUT and PATCH, graphql offers only mutation which can be utilized in both cases based on developer choice, so you have control over whether you want to update only a certain field which user mentions or update a whole data.

We will be utilizing mutation for only the field which the user wants to update, based on arguments passed for updating the data.

let us visualize it in typeDefs and resolvers, which are shown below.

//typeDefs.js
type Mutation {
//we have mention also id here for selecting the post and then updating it
updatePost(id:ID!,update:updatePostInput!):Post!
}

input updatePostInput {
//you can mention your update post field or add more field
image: String,
description: String
}

//resolvers.js
//you can use the async function as well for error handling
updatePost: (_,args)=>{
     //extracting the arguments variable passed 
        const {id}=args
        const {image,description}=args.update
      //logic for validation of the request for the particular id
     // and then updating the required fields which is mentioned
    // e.g. in MongoDB we can use findByIdAndUpdate(id) to update the data
    //return the updated post 
}

Let us now, see how it happens in Apollo studio we are going to pass only one field for updating the particular post along with postID which we have created, during our create post segment, see above.

In the above, we can see how the arguments are passed to update a particular post, you can also see that the update variable only contains a description field which is required to update and hence it is updated successfully as seen in the response.

Conclusion:

From the Above discussion, we now clearly understand the concept of creating, updating and deleting in GraphQL, how it is done using the Mutation keyword, and why there is only a requirement mutation keyword for making the three types of requests available in graphql, which is not in the case of REST APIs and that why the GraphQl also have the upper hand on this type of usage.

Furthermore, until now till these 3 Parts, we can now clearly understand how to fetch data, create data, delete and update the data in grqpgL and perform CRUD operations using both the query and mutation keywords.

please leave a comment, if you have any questions or feedback.