How To Use GraphQL in Node.js

In this article, we will learn how to use GraphQL in Node.js Apps.

Step 1: Create your project using the following command.

mkdir GraphQL
cd GraphQL
npm init -y

Step 2:  First, we need to install a graphql, express, express-graphql. You can install it using the below command

npm install graphql express express-graphql

Step 3: create a server.js file and open server.js in a text editor and add the following lines of code.

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

// Initialize a GraphQL schema
var schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// Root resolver
var root = {
  hello: () => 'Hello world!'
};

// Create an express server and a GraphQL endpoint
var app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,  // Must be provided
  rootValue: root,
  graphiql: true,  // Enable GraphiQL when server endpoint is accessed in browser
}));
app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'));

Step 4: Defining a Schema

In GraphQL, the Schema manages queries and mutations, A schema defines a GraphQL API’s type system. It describes the complete set of possible data (objects, fields, relationships, etc.) that a client can access.

In JavaScript, you would use the buildSchema function which builds a Schema object from GraphQL schema language.

You can define different types inside buildSchema, which you might notice in most cases are type Query and type Mutation. type Query is an object holding the functions that will be mapped to GraphQL queries, used to fetch data (equivalent to GET in REST) type Mutation holds functions that will be mapped to mutations, used to create, update, or delete data (equivalent to POST, UPDATE, and DELETE in REST).

// Initialize a GraphQL schema
var schema = buildSchema(`
  type Query {
    user(id: Int!): Person
    users(shark: String): [Person]
  },
  type Person {
    id: Int
    name: String
    age: Int
    shark: String
  }
`);

Step 5: Defining Resolvers.

A resolver is responsible for mapping the operation to an actual function. In simple terms, a resolver acts as a GraphQL query handler. Inside type Query, you have an operation called users. You map this operation to a function with the same name inside the root.

var users = [
  {
    id: 1,
    name: 'Brian',
    age: '21',
    shark: 'Great White Shark'
  },
  {
    id: 2,
    name: 'Kim',
    age: '22',
    shark: 'Whale Shark'
  }
];

// Return a single user
var getUser = function(args) {
  var userID = args.id;
  return users.filter(user => user.id == userID)[0];
}

// Return a list of users
var retrieveUsers = function(args) {
  if (args.shark) {
    var shark = args.shark;
    return users.filter(user => user.shark === shark);
  } else {
    return users;
  }
}

Step 5: Replace the pre-existing lines of code for root in server.js with this new object:

var root = {
  user: getUser,  // Resolver function to return user with specific id
  users: retrieveUsers
};

Step 6: Defining Mutations.

Mutation queries modify data in the data store and return a value. It can be used to insert, update, or delete data. Mutations are defined as a part of the schema.

// Add this type Mutation in existing buildSchema
type Mutation {
    updateUser(id: Int!, name: String!, age: String): Person
}

After getUser and retrieveUsers, add a new updateUser function to handle updating a user:

// Update a user and return new user details
var updateUser = function({id, name, age}) {
  users.map(user => {
    if (user.id === id) {
      user.name = name;
      user.age = age;
      return user;
    }
  });
  return users.filter(user => user.id === id)[0];
}

Also, update the root resolver with relevant resolver functions

// Root resolver
var root = {
  user: getUser,
  users: retrieveUsers,
  updateUser: updateUser  // Include mutation function in root resolver
};

After a mutation to update the user, you get the new user details.

Output:

To learn more about GraphQL, check the official documentation.

I hope this article helps you and you will like it.

Please give your valuable feedback and if you have any questions or issues about this article, please let me know.