How to build GraphQL server with Node.js and express.js

David Mráz
Jul 28, 2017 · 5 min read

GraphQL is taking over the API world. If you have recently been introduced to this query language and want to try out its features in Javascript, you should follow this quick tutorial for setting up your GraphQL server in Node JS using Express. Assuming you already have Node JS installed on your computer, you can check your version with this command

node -v

The output to the console should be something like this

v6.10.0

This tutorial is, of course, not limited to this particular version. Due to rapid changes in the Node JS environment, it’s better to use the LTS version.

Checkout the upcoming free GraphQL language course with in browser exercices

From upcoming GraphQL Language course

What libraries should we use?

Edit 11.8.2017: Default GraphiQL history support has been also added to graphql-server-express

If you want to switch to a different library, the structure of the project should be similar and you will only have to replace the Express middleware. If you have already set up a project, this can be installed using yarn or npm

npm i express-graphql graphql --save

Starting your project

git clone https://github.com/a7v8x/express-graphql-demo.git -b feature/1-setting-up-basic-graphql-server-in-nodejs-with-express

If we want to start right away we can just clone the repository, switch to the relevant branch and then go directly to GraphiQL section. It may also be helpful to look through the following section before moving on.

Designing our GraphQL schema

server.js — intializing the Express server and the GraphQL endpoint using the express-graphql library

We will import graphqlHTTP and use it as the middleware for our /graphql endpoint. The Graphql endpoint is then available at the /graphql address and also GraphiQL is permitted in development mode because most of the time we do not want to expose our documentation in a production environment. The schema.js file can be written as follows

schema.js — root schema definition

The UserType and UserInputType are defined as follows.

UserTypes.js — the UserType and the UserInputType definition

We have defined both queries and mutations, so we should include our definitions of user queries and mutations. This users.js file consists of the userQueries and userMutations object. These are then imported into the schema.

users.js —the userQueries and the userMutations definition

We have one query called users and one mutation called createUser. We can also see that every query or mutation consists of the following fields

  • Query type definition (in our case the UserType definition)
  • Arguments, which are passed most of the time as GraphQL variables
  • A resolver, which is a function executed after calling and validating query or mutation

The structure of each query or mutation will be discussed more precisely in future articles. Because in the testing project we do not have a database, we used faker library for generating fake objects for our testing purposes.

GraphiQL testing enviroment

the GraphiQL browser IDE

This is our training ground. Personally, this is one of my favourite features of GraphQL. The development is so much more efficient and pleasant, than usinge some third-party tool like PostMan for creating a REST API. If we write down the queries, we can test our queries and mutations and also view the history of previously called requests like in this screenshot

GraphiQL history

GraphiQL is not only useful for testing our schema, but also for having up-to-date documentation. When we click on the Docs label, we can walk through the schema.

GraphiQL schema documentation

Testing your schema

the query for retrieving users from the server

After hitting Play button, we should be able to retrieve data generated by faker

response for the query for retrieving users

Now we have tested all queries in the schema and we can proceed to mutation testing. We only have one mutation which can be executed like this mutation for creating user

a mutation for adding user

We should be able to retrieve this response

The faker function generates uuids randomly, therefore it is different for nearly every call

Did you like this post? Then clap for this article as it is easier for others to find it. The repository with the examples and project setup can be cloned from this GitHub branch. You can get early access to upcoming free GraphQL course by subscribing at graphqlmastery.com.

Atheros Intelligence

Everything you need to know about building AI products. Check out free GraphQL language course https://graphqlmastery.com/course/graphql-language.

David Mráz

Written by

React | GraphQL | Node JS | AI | Machine learning, Free GraphQL language course http://graphqlmastery.com/course/graphql-language

Atheros Intelligence

Everything you need to know about building AI products. Check out free GraphQL language course https://graphqlmastery.com/course/graphql-language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade