Graphql With NodeJs

Graphql is a query language for handling the APIs developed to resolve the problems faced by developers with REST architecture.

In simpler words, it is a way to serve data from a server to the client differently as compared to the traditional way. It gives the client the control and makes it insanely easy to aggregate the data from multiple sources.

In this article, we will be setting up graphql in nodejs with Express.js backend library. Using Express and Graphql is one of the easiest ways to set up a server and get an API running. So let’s get started

Setting Up Graphql in Nodejs with Express.js

Initialize the project with the following command.

npm init

And then install the following packages for running Graphql in nodejs

npm install express express-graphql graphql --save

Creating the Graphql server.

Entering the following code will create our express and Graphql server in NodeJS

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

const app = express();

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

app.listen(3000, () => {
  console.log("Server is running on port 3000..");
});

graphqlHTTP is the express middleware that creates the Graphql server. Graphql schema and an option of Graphql are the two arguments taken by it. Graphql is a graphical interface for querying and testing the Graphql queries.

To run the above code without error, we have to create a schema and add it to our server.js.

const { GraphQLSchema
} = require("express-graphql");
const schema = new GraphQLSchema({
  
});

Now, run the server with the following command.

npm start

We need to create a root query that will enclose all the Graphql queries. Let us create in the example below.

Creating A Simple Book API.

We will make the following imports that will help us create our API with some dummy book data.

const {
  GraphQLSchema,
  GraphQLObjectType,
  GraphQLString,
  GraphQLList,
  GraphQLInt,
  GraphQLNonNull,
} = require("graphql");

const books = [
  { id: 1, name: "Harry Potter and the Chamber of Secrets", authorId: 1 },
  { id: 2, name: "Harry Potter and the Prisoner of Azkaban", authorId: 1 },
  { id: 3, name: "Harry Potter and the Goblet of Fire", authorId: 1 },
  { id: 4, name: "The Fellowship of the Ring", authorId: 2 },
},
];

Creating Root Query.

We will create the root query having different fields for getting the books. For keeping things simple, our root query will fetch us all the books from the dummy data. The code for creating a query is given.

const RootQueryType = new GraphQLObjectType({
  name: "Query",
  description: "Root Query",
  fields: () => ({
      books: {
      type: new GraphQLList(BookType),
      description: "List of All Books",
      resolve: () => books,
    },
  }),
});
const schema = new GraphQLSchema({
    query: RootQueryType,
});

Type:  This describes the type of data. We have a Graphql list of an object named BookType which is the custom object that will be created below.

Description: The docs section in Graphiql gives description of each created object.

Resolve: It is being used to get data from the book array.

Creating The Book Object.

Creating custom objects in Graphql is easy because of its GraphQLObjectType. We can create our Book object type as follows.

const BookType = new GraphQLObjectType({
  name: "Book",
  description: "This represents a book written by an author",
  fields: () => ({
    id: { type: GraphQLNonNull(GraphQLInt) },
    name: { type: GraphQLNonNull(GraphQLString) },
    authorId: { type: GraphQLNonNull(GraphQLInt) },
  }),
});

All the fields need a type that is imported from the Graphql library. GraphQLNonNull makes sure that the field is not left null.

Now, let’s restart the server and see the results.

Results

Our docs explorer is showing our root query with fields Books as defined in our schema. Books further have their own fields. All of this can be a queryed with our graphical interface.

Writing the following query in GraphiQL will fetch us all the books with its fields.

{
  books {
    id
    name
    authorId
  }
}

Result

Conclusion

In this article, we have seen how to use graphlql with nodejs. We covered querying a list of books but you can try and play with other functionalities of graphql as well.  Graphlql has evolved the process of fetching data from the server due to its powerful nature. Make sure you use it in your next project!

What’s the biggest thing you’re struggling with right now that we as a technology consulting company can help you with? Feel free to reach out to us at info@jalantechnologies.com. We hope our assistance will help!