From REST to GraphQL: Transforming Your Node.js API Architecture Guide

GraphQL is a powerful query language for APIs, enabling clients to request only the data they need. Here I’m going to guide you on how to work on GraphQL server using Node.js and Express.

by pinterest

GraphQL offers several advantages over traditional REST APIs

1. Flexible Responses: Clients can shape the structure of the response in GraphQL. This flexibility is particularly useful for mobile apps and front-end frameworks, as they can get all the necessary data in one request, reducing the need for multiple API calls.
2. Real-time Data with Subscriptions: GraphQL supports real-time data updates through subscriptions. Clients can subscribe to specific events and receive updates when relevant data changes, enabling real-time features without relying on additional technologies.
3. Efficient Data Fetching: With REST, you often end up over-fetching or under-fetching data due to fixed endpoints. In contrast, GraphQL enables clients to request exactly the data they need, minimizing over-fetching and reducing the number of API calls.

Setting Up a GraphQL Server

1. Set up the project and install the required packages as before

mkdir graphql-server
cd graphql-server
npm init -y
npm install express express-graphql graphql

2. Create the GraphQL schema

Inside the project directory, create a new file named schema.js. This file will define the GraphQL schema using the GraphQL schema language.

const { buildSchema } = require('graphql');

const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

module.exports = schema;

3. Implement the Resolver

Create another file named resolver.js to implement the resolver for the hello field in the schema.

const resolver = {
  hello: () => 'Hello, GraphQL!',
};

module.exports = resolver;

4. Set up the Express server

Create the main server file app.js, and set up the Express server.

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const schema = require('./schema');
const resolver = require('./resolver');

const app = express();

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: resolver,
  graphiql: true, // Enable GraphiQL for testing the API
}));

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`GraphQL server is running on http://localhost:${PORT}/graphql`);
});

5. Start the Server

node app.js

6. Test the GraphQL API

Open your browser and navigate to http://localhost:3000/graphql. This will launch the GraphiQL interface. In the GraphiQL interface, type the following query and click the “Play” button:

query {
  hello
}

You should see the response: { "data": { "hello": "Hello, GraphQL!" } }

Mutations in GraphQL

Before moving further we must need to know about mutations in GraphQL. Mutations are used to modify or create data on the server. I’ll provide you with an example of setting up mutations in a GraphQL server using Node.js and Express.js for a “books” application.

1. Set up the project and install the required packages as before

mkdir graphql-mutation
cd graphql-mutation
npm init -y
npm install express graphql express-graphql uuid

2. Create a schema.js file to define your GraphQL schema including mutation operations

const { GraphQLObjectType, GraphQLString, GraphQLList, GraphQLNonNull, GraphQLSchema } = require('graphql');
const uuid = require('uuid');

// Sample data
let books = [
  { id: '1', title: 'Book 1', author: 'Author 1' },
  { id: '2', title: 'Book 2', author: 'Author 2' },
];

// Book Type
const BookType = new GraphQLObjectType({
  name: 'Book',
  fields: () => ({
    id: { type: new GraphQLNonNull(GraphQLString) },
    title: { type: new GraphQLNonNull(GraphQLString) },
    author: { type: new GraphQLNonNull(GraphQLString) },
  }),
});

// Root Query
const RootQuery = new GraphQLObjectType({
  name: 'RootQueryType',
  fields: {
    books: {
      type: new GraphQLList(BookType),
      resolve: () => books,
    },
  },
});

// Mutation
const RootMutation = new GraphQLObjectType({
  name: 'RootMutationType',
  fields: {
    addBook: {
      type: BookType,
      args: {
        title: { type: new GraphQLNonNull(GraphQLString) },
        author: { type: new GraphQLNonNull(GraphQLString) },
      },
      resolve: (_, { title, author }) => {
        const newBook = {
          id: uuid.v4(),
          title,
          author,
        };
        books.push(newBook);
        return newBook;
      },
    },
    updateBook: {
        type: BookType,
        args: {
          id: { type: new GraphQLNonNull(GraphQLString) },
          newTitle: { type: new GraphQLNonNull(GraphQLString) },
          newAuthor: {type: new GraphQLNonNull(GraphQLString)},
        },
        resolve: (_, { id, newTitle, newAuthor }) => {
          const book = books.find(book => book.id === id);
          if (book) {
            book.title = newTitle;
            book.author = newAuthor;
            return book;
          }
          return null;
        },
    },
    deleteBook: {
      type: GraphQLString,
      args: {
        id: { type: new GraphQLNonNull(GraphQLString) },
      },
      resolve: (_, { id }) => {
        const index = books.findIndex(book => book.id === id);
        if (index !== -1) {
          books.splice(index, 1);
          return 'Book deleted successfully';
        }
        return 'Book not found';
      },
    },
  },
});

// Create GraphQL Schema
const schema = new GraphQLSchema({
  query: RootQuery,
  mutation: RootMutation,
});

module.exports = schema;

3. Create an index.js file to set up the Express.js server

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const schema = require('./schema');

const app = express();

app.use('/graphql', graphqlHTTP({
  schema,
  graphiql: true,
}));

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

4. Run the server by node index.js

Now we can use the GraphQL Playground to test your mutations

Get Books query:

{
  books {
    id
    title
    author
  }
}

Add Book Mutation:

mutation {
  addBook(title: "New Book", author: "New Author") {
    id
    title
    author
  }
}

Update Book Title Mutation:

mutation {
  updateBookTitle(id: "1", newTitle: "Updated Book Title",newAuthor: "New Author") {
    id
    title
    author
  }
}

Delete Book Mutation:

mutation {
  deleteBook(id: "1")
}

GraphQL has gained popularity because of its flexibility and efficiency in fetching data for modern applications, particularly those with complex data requirements and dynamic user interfaces. It’s important to note that while GraphQL offers these advantages, it might not be the best choice for every use case. It’s up to you guys!

Quote of the Day

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” — Martin Fowler

Thanks for reading! happy coding