Master the fundamentals of React and Redux

Setting Up your First GraphQL Server

Learn how GraphQL provides a complete and understandable description of the data in your API and gives clients the power to ask for exactly what they need.

This article is the first one of the new tutorial series on GraphQL. In this series, we will do a walkthrough of key GraphQL concepts one by one. I have tried to keep every lesson short and simple so that you can work on it whenever you have some free time. By the end of this tutorial series, you will learn about:

GraphQL queries and mutations,

schema and types system, and

the best practices for using GraphQL in your projects.

In this first tutorial, we will begin with creating a GraphQL server using an open-source GraphQL editor called GraphIQL. Following that, we will create a simple GraphQL schema similar to Github’s user object. We will also learn about query arguments and aliases and their applications.

Let us begin with a brief introduction about GraphQL:

GraphQL is an application layer query language by Facebook. With GraphQL, you can define your backend as a graph-based schema. The clients can get predictable results by querying your dataset for exactly what they need.

To demonstrate this, let us quickly set up a simple GraphQL server on top of Github user API. We will be using the reference implementation of GraphQL in Javascript. All of the code covered in this tutorial is available here.

Setting up a Server

First, we will setup an HTTP server to receive graphql queries. I am using Express here since graphql provides a pluggable middleware for express applications to easily create a graphql server.

To get started, create a new node project, or clone this repository:

1

2

3

git clonehttps://github.com/adhbh/ewa-graphql.git

We will start by installing graphql, express and graphql-express. In the ewa-graphql folder, run:

1

2

3

npm install--save express graphql express-graphql

Since we will be using ES6 (or ES2015) to make development easier, we will require babel to transpile our code:

1

2

3

npm install--save-dev babel-cli babel-preset-es2015

Let us use express to create an HTTP server that listens to port 7600. In ewa-graphql folder, create a new file named server.js with the following content:

1

2

3

4

5

6

import express from'express';

constapp=express();

app.listen(7600);

We can now added a start script in package.json file which will transpile the code using babel and start the express server:

1

2

3

4

5

6

"scripts":{

"start":"babel-node --presets es2015 server.js",

"test":"echo \"Error: no test specified\" && exit 1"

}

We will now import express-graphql and add it as a middleware to our express app:

1

2

3

4

5

6

7

8

9

10

11

12

import express from'express';

import graphQLHTTP from'express-graphql';

constapp=express();

app.use(graphQLHTTP({

graphiql:true,

}))

app.listen(7600);

You might be wondering what is graphiql and why it is set to true. GraphIQL (pronounced graphical) is an in-browser IDE for exploring GraphQL. It has built-in support for documentation and autocompletion. You’ll be using it throughout this course.

To see how it looks, try running npm start and open http://localhost:7600 in your browser. You must see an error like this:

1

2

3

4

5

6

7

8

9

{

errors:[

{

message:"GraphQL middleware options must contain a schema."

}

]

}

For executing GraphQL queries using graphiql, we need to define a schema. We should know about the GraphQL type system and how it describes what data can be queried. In the next section, we will define a schema for Github’s user object. For now, for sake of seeing the Graphiql interface, let us create a new file schema.js with the following content:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

import{GraphQLSchema,GraphQLObjectType,GraphQLString}from'graphql';

exportdefaultnewGraphQLSchema({

query:newGraphQLObjectType({

name:'Query',

fields:{

hello:{

type:GraphQLString,

resolve:(root,args)=>'world'

}

}

}),

});

and then import the schema in the graphql server:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

import express from'express';

import graphQLHTTP from'express-graphql';

import schema from'./schema.js';

constapp=express();

app.use(graphQLHTTP({

schema,

graphiql:true,

}));

app.listen(7600);

What we have created is a “hello world” for GraphQL applications. To see it in the GraphIQL IDE, run npm start and go to http://localhost:7600. Now it is time to run our first graphql query!

Paste the following in the GraphIQL editor

1

2

3

4

5

{

hello

}

and then click on the ‘play’ button on the top left corner next to the GraphIQL logo. The server should response with the following data:

1

2

3

4

5

6

7

{

"data":{

"hello":"world"

}

}

We will now learn how to define a schema for any dataset.

Defining a GraphQL Schema

GraphQL query language is basically about selecting fields on objects. For example:

1

2

3

4

5

6

7

8

{

user(login:"tj"){

name,

about

}

}

We start with the default ‘root’ object

We select user field on that, with an argument login: "tj"

From the object returned by user we select name and about fields

Every GraphQL service defines a schema which completely describes the set of possible data you can query on that service. When the query comes in, the query is validated and executed against this schema.

Query Alias

As the name suggests, alias let’s you rename the result of a field to anything you want.

Try running the following query in GraphIQL :

1

2

3

4

5

6

7

8

{

user(login:"tj"){

emailId:email

}

}

This can be useful when we want to get two or more results in one request.

For example:

1

2

3

4

5

6

7

8

9

10

11

12

{

user1:user(login:"adhbh"){

name

}

user2:user(login:"tj"){

name

email

}

}

What’s Next?

In this tutorial, we have created a GraphQL server for us using a real datasource. We will use this in the upcoming tutorials to learn about concepts like mutations, fragments, query variables and several advanced GraphQL types like interfaces and unions.

In the next tutorial, we will see how GraphQL can be used to get many resources in a single request. While typical REST APIs require loading from multiple URLs, GraphQL APIs get all the data your app needs with a single endpoint. We will also see how dataloader can be used with GraphQL for caching and batching requests.

Subscribe Now for Exclusive Content

Hi! I am Adheesh, I am a full-stack software engineer. I did my post-graduation from BITS Pilani, India where I studied Mathematics and Electrical and Electronics Engineering.

I am currently working at Myntra, which is the largest fashion e-commerce company in India. I am interested and passionate about building interactive interfaces for the web and mobile, and write performant and scalable web services.

WELCOME

About Eloquent WebApp

EloquentWebApp is a resource for Software engineers, Web Developers and JavaScript professionals that want to invest in their skills. Time is precious, choose a lesson and start learning something right now.