The essence of GraphQL

How GraphQL can elegantly simplify the data flow between server and client


Gone are the days when users didn’t bother about performance of an application.72% of users tend to abandon a website if it doesn’t respond at a blazing fast pace and furthermore 42% of users become angry because of the time taken to open a particular website.We all must have had our fair bit of these emotions while dealing with slow web applications.

My outburst of not returning to that website

One of the prominent reasons of a slow web application is the process of fetching data from server using the server’s API(Application Programming Interface) or more popularly REST API. API can be thought of as a middleman between the server and the client that facilitates data transfer between server and client. To understand better,let me give an analogy.

If you visit a restaurant,you are the client and the kitchen is the server.You want food from the kitchen,which can be thought of as data.Thus here waiter is the middleman who brings food from kitchen to you and can be thought of as the API.You summon the waiter by saying “Excuse me” or in any local language.

APIs can be similarly called by what are known as API endpoints and they return data generally in JSON format.API endpoints generally look like this

https://www.example.com/resources?query=value

for example,a google maps API to query details about Florence will be

https://maps.googleapis.com/maps/api/geocode/json?address=Florence

It return a response or data from Google’s server as shown

JSON data as returned from Google Server

This process seems simple but it is quite a perfomance bottleneck because of the following reasons:

  1. The API endpoint returns more data than is needed.This can be a problem when we are on a slow or metered connection as the more data transfer means more use of bandwidth.
  2. The structure of the API endpoint keeps on becoming complex as we add more resources and this is what ‘I’ call Slash Hell as we keep on adding slashes for fetching more resources.Example:

https://www.example.com/resources/resource1/subresource/subresource1?query=value

3. There is no organization of the data as such and many API endpoints need to be defined at the server side for fetching different resources.More the number of API calls to the server,more time will it take for the web page to load.

If you did not understand the 3 points that I mentioned above,let me simplify it for you by the same restaurant analogy.

It is difficult for the waiter to bring all of the ordered food at once and this causes delay in serving[Point 1]

You have to search for the menu,dig deeper to find the right food and this results in a lot of effort[Point 2]

You call the waiter and order some starter.The waiter goes to the kitchen and brings in food.This takes time.Suppose you want to order a main course.you again repeat the above process and this takes a lot of time.[Point 3]

Is there any better option to eat gracefully.Yes, a buffet system.

Buffet System is a better option

Welcome GraphQL to the party!

GraphQL is an application layer query language built by Facebook. What this means is that GraphQL is designed to interpret a string from a server or client and return that data in an understandable, stable, and predictable format. As the official website for GraphQL puts it, “Describe your data, ask for what you want, get predictable results.”

How GraphQL simplifies all of the problems with REST API calls:

  1. Get only what you want(Just as in a buffet system).For example if you would want to get the latitude or longitude of a place using some service like google maps,you would merely write something like this
{
place(name:"florida")
{
latitude
longitude
}
}

You get simple JSON result unlike the above REST API used earlier

{
"place": {
"latitude": "27.6648° N",
"longitude": "81.5158° W"
}
}

This saves bandwidth and thus data is fetched even in slow or metered connections.

2. You don’t need to fall into the problem of Slash Hell as the data is bundled into a single graph schema(unit) and sent,thus the server is not required to be called again and again,this saves time and makes the application faster.

3. API can be organized into a simple and understandable graph schema, and doing so forces you to better organize and understand your data, the flow of that data, and the inefficiencies and errors in that system.

type Location{
latitude: String
longitude: String

}

4. It has a good community support and is used by companies such as Facebook,Shopify,Pinterest etc.

In the end,I feel that GraphQL is here to survive and with time its use is going to increase because of its simplicity and elegancy.

PS:The stats given at the beginning was based on a survey by 1 & 1 internet company on US users.

Thanks for reading! I’m a Web Developer and I’m available for remote work! Got something to do? Let’s get in touch!

Was this post helpful? Consider giving a clap or claps:-)