Step-by-Step Example

1. Set Up the Project

Create a new project directory, initialize it, and install the necessary dependencies:

mkdir graphql-mutations
cd graphql-mutations
npm init -y

Output:

2. Install dependencies

Install Express and its associated extension Express-GraphQL in addition to the GraphQL package itself:

npm install express express-graphql graphql

3. Create the index.js File

In your project directory, create an index.js file and set up a basic Express server with GraphQL.

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

// Mock data
let books = [
{ id: 1, title: '1984', author: 'George Orwell' },
{ id: 2, title: 'To Kill a Mockingbird', author: 'Harper Lee' }
];

// Construct a schema, using GraphQL schema language
const schema = buildSchema(`
type Book {
id: Int
title: String
author: String
}

type Query {
books: [Book]
}

type Mutation {
addBook(title: String!, author: String!): Book
updateBook(id: Int!, title: String, author: String): Book
deleteBook(id: Int!): Book
}
`);

// The root provides a resolver function for each API endpoint
const root = {
books: () => books,
addBook: ({ title, author }) => {
const book = { id: books.length + 1, title, author };
books.push(book);
return book;
},
updateBook: ({ id, title, author }) => {
const book = books.find(book => book.id === id);
if (!book) throw new Error('Book not found');
if (title) book.title = title;
if (author) book.author = author;
return book;
},
deleteBook: ({ id }) => {
const index = books.findIndex(book => book.id === id);
if (index === -1) throw new Error('Book not found');
const deletedBook = books.splice(index, 1)[0];
return deletedBook;
}
};

const app = express();
app.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true,
}));

app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'));

4. Run the server:

Start our server by running:

node index.js

5. Access GraphiQL:

Open our browser and navigate to http://localhost:4000/graphql. we should see the GraphiQL interface, which is an in-browser tool for writing, validating, and testing GraphQL queries.

Mutations in GraphQL

GraphQL is a query language for REST APIs created by Facebook which is designed to provide more efficiency, flexibility, and superiority in data handling.

While GraphQL queries are used to retrieve information, mutations are used to perform data operations on the server, similar to HTTP Commands like POST, PUT, PATCH, and DELETE in REST APIs. In this article, We will learn about the Mutations in GraphQL in detail.

Similar Reads

Mutations in GraphQL

Mutations in GraphQL are embedded in the schema and are used to write data to the server. Every mutation can have an argument to take in the desired data to be modified and every mutation can also have a return value of data. Before moving on, let’s take a step-by-step approach to how to set the mutation with Express. js and Express-GraphQL....

Prerequisites

Node. js and npm: GraphQL runs on node.js, so you need to have Node.js and npm which is Node Package Manager installed on your computer. You can collect them from the Node js official website. 2. Basic Knowledge of JavaScript: It is important to have a basic understanding of JavaScript and its operations because all your GraphQL server as well as the queries using the APIs will be written in JavaScript. 3. Basic Understanding of GraphQL: It will be helpful to have prior knowledge of GraphQL concepts such as schema, queries, and resolvers....

Step-by-Step Example

1. Set Up the Project...

Implementing a Mutation

Mutations are defined in the schema just as queries, but with the concept of the Mutation type. In the above example, we have three mutations: These are addBook, updateBook and deleteBook operations and all of them work with books table....

Working with Variables in Mutations

GraphQL supports the use of variables in mutations, which makes them more flexible and reusable. Here’s how we can use variables with the addBook mutation....

Advanced Mutations

1. Bulk Mutations...

Conclusion

Overall, mutations in GraphQL are important and serve the purpose of changing server data. They enable clients to carry out the CRUD operations in the shortest time possible. In this article, we have learned about how to perform various data manipulation responsibilities through defining mutations and installing a simple Express server. This example shows how to eventually work with basic mutations to create a good start for creating more complex GraphQL applications. Using variables in mutations allows for better flexibility and code reuse by making your API calls all the more effective....