Introduction to GraphQL

Hi everyone! This is the time for a new article series. What's it? Have you heard of GraphQL? Anything you know already? Some may have no idea of this GraphQL. This article is specifically for them...for Beginners!! So, what's GraphQL?

GraphQL is an open-source data query and manipulation language developed by Facebook. It's used to deal with data which are having relationships like graphs. When we develop applications, this language can be used to handle data in a more efficient way with high performance. The below image shows you what that Facebook tells about GraphQL in their official website.

How GraphQL is used?

You may have already heard about REST APIs. There we simply send a HTTP request to a server and get a response as a result. There we have API endpoints which means the URLs we need to call for a result. In our API code, we define them. So we define the queries to get data from a database during our API development.

E.g: We need to implement an API for a library. Basic one..Functionalities will be;
1. Get details of all books
2. Get details of a book by it's ID/ISBN
3. Get details of all authors
4. Get details of an author by his/her ID

The structure of the API and front-end will be like this...

When we introduce GraphQL into this setup, structure is going to be like this in abstract.

Here we are using GraphQL in our back-end API(server) to retrieve, modify data in a database. So we have to use client libraries according to the languages we are using in both front-end and back-end. As an example, If we use Express JS as back-end, we have to install some NPM packages into the code and manipulate data stored in any kind of database(let say MongoDB), using it. If we use React for front-end, we have to install and use a client to talk with GraphQL endpoints. Apollo is such client used to send requests to back-end with React.

How GraphQL works?

At the beginning, I told you that using GraphQL is more efficient. I can explain the processing that helps efficiency and performance in GraphQL, using its main features described below.

1. Ask for what you need, get exactly that

Let's take the above library scenario. We are going to retrieve all the books as a list from database. In our usual way, we write a code to perform a query to get all the Book objects. Every object has many fields like id, title, category, author, ISBN.....But if we do not need this ISBN to the UI? Results are already having this field in every object. So, it's a waste. When we use GraphQL, we can define data we need, before sending a query. This is the main benefit.

2. Get many resources in a single request

Imagine that when we retrieve all the books. As I told, we have a field called author in each object. In normal way of performing queries, we get the author name only. If we want to get the books written by the same author with this same request? Usually we have to call another API endpoint with author ID, to fetch the books written by an author. There we find the usage of GraphQL. It considers data as nodes in a graph and sends data looking at the relations. Look at the below one.

Here, if we need Book(3), GraphQL will look at the Book with ID 3 first. Then title and category are taken. It's connected with Author. So GraphQL go into that object also. From this, author's name and age are taken. The author has written another two books => Book(4), Book(5). So, their details are also retrieved. Finally it will send the data including it's title and category + author object + books objects as the Book object we need.

It can wrap the author's publications also along with the response when we request to retrieve all books. Then our requirement is fulfilled with one request!! We get many resources in a single request! That's why this GraphQL is said to be efficient. 

3. Describe what’s possible with a Type system

When GraphQL is introduced to the back-end, we can define the entity class as we want. Then the retrieving data will be in this format. We have to define the classes properly. Look at the below setup.

In the scenario we discussed, we have to setup the Type in a way like this. You can see how they are related to each other. In the Left side, GraphQL query format is shown. In the Right side you can see the way to define the schema to deal with data.

Now I think you have a basic idea about GraphQL guys!!! This technology is already used by a lot of famous brands like Facebook, Twitter, Pinterest, Paypal, Amplitude, Dailymotion, Atlassian and etc.

You got the idea how it's said to be efficient and fast? I just needed to give a brief but in detailed introduction to this amazing query language. I tried my best to share the things I know with you. If you want to learn more, go to their official site from here => https://graphql.org
Hope you will get something from this article..

Thank You!