What is GraphQL and how to build a GraphQL server?

What is GraphQL and how to build a GraphQL server?

ยท

3 min read

What is GraphQL?

GraphQL is a query language and server-side runtime for application programming interfaces (APIs) that prioritizes giving clients exactly the data they request and no more. GraphQL is designed to make APIs fast, flexible, and developer-friendly.

GraphQL was created by developers at Facebook in 2012.

GraphQL was developed to support the complicated data structures required to show the Facebook News Feed on the mobile application. Using GraphQL, the client can request the necessary data using a single endpoint with a defined schema.

Considering you're building a blogging platform, you will need to fetch posts, author, published date, comments, and other associated data with a particular post. With a standard REST API, you can easily design such an API. But now consider that you want to display comments only on the web app, not the mobile app. It's almost impossible to achieve this with a single REST API.

This is where GraphQL can help you. The client can ask for the data they need, and the server will return with only that data.

Let's see how you can build a GraphQL API.

We are assuming you have Node.js installed on your machine. If you haven't installed it, click on the following link and install it simply. *node*

Let's start creating a quick GraphQL server.

initialize our App

Open your terminal and run the following commands: ๐Ÿ‘‡๐Ÿป It will simply create a new directory as "graphql" and initialize the project.

carbon.png

The next step is to create an empty JavaScript file (File name could be anything, in this case, app.js) and install all the necessary packages. We will discuss the use of each package as we progress further into this article.

installing packages

npm install express express-graphql graphql

Perfect! Now we have all the necessary packages and files, let's create a basic local server.

In the below code snippet, we initialize our app and start the local server at port 3000. Run this node file to start the server

Starting the Server

node index.js

image.png

Our server is now running, it's time to build the schema that is nothing but the description of data that the client can request.

Let's create a new "schema" folder in our graphql directory. Inside that schema folder, create a JavaScript file as schema.js.

graphql > schema > schema.js

Let's start with creating a simple User schema inside the schema.js file. We need two things:

  • -Schema that defines the Query type.
  • -A โ€œresolverโ€ function for each API endpoint.

The resolver function is a collection of functions that generate responses for a GraphQL query.

BuildSchema

image.png

The above code is pretty intuitive.

  • User type has two fields, name and age of type string and integer, respectively.
  • The root provides the resolver function. In this case, we are resolving user type which returns the value of name and age.

Export schema

Export schema and root so that we can use them in our app.js file. Add below code snippet at the end of schema.js file.

module.exports = {schema, root};

It's time to run this query on the GraphQL Server that we just built (app.js file). We will use graphql-express libaray to run GraphQL server on /graphql HTTP endpoint.

FSkjU8_XEAAewlW.png

graphiql: true provides the GraphQL playground.

Head over to localhost:3000/graphql and you see the playground like this. ๐Ÿ‘‡๐Ÿป

image.png

Let's try to run the query and see what we get.

image.png And we are getting the data.

In our query, we requested for name and age fields of the User type.

image.png

Assuming you only need to fetch age, in GraphQL, you don't need to create a separate endpoint that you would have needed if you were working with REST API.

image.png