Why GraphQL Is An Alternative Over React API

This article will be about GraphQL and I am covering the below topics in this article:
  • What is GraphQL ?
  • How does GraphQL work?
  • Why is GraphQL an alternative to Rest API?
  • Real time scenario using GraphQL.
  • Types of Operations in GraphQL .
Hope we are good to go.
 

What is GraphQL ?

 
Actually GraphQl is a replacement to a REST API. I assume you already know what REST API is. It has a couple of end oints and it is a stateless, client independent API for data exchange.
 
We use this Rest Api for single page applications or mobile applications where we don't return any views to renders browsers. We just return/exchange the data between frontend.
 
So, here we can question, when Rest api is doing all this, why is GraphQL an alternative to this Rest API?
 
And the answer is, GraphQL offers same features that Rest API is giving, but additionally GraphQL is highly flexibile.
 
So how flexbile is GraphQL? To make it clear let's see what are the limitations over Rest API.
 
Rest API works with endpoints like GET/POST. So we can fetch the data and return the data in JSON type as shown below
 
Why GraphQL Is An Alternative Over React API
 
Now let's say we have a requirement to get only Id & title. In Rest API we always send back all the data whether we need it or not.
 
To acheive the above requirement, we have different scenarios to do so.
 
Scenario 1
 
We just create new Rest API endpoints, in this we send back the data only for id & title.
 
I personally don't think this is a good way to do it, because at the end of the day we will end up with lot of API endpoints as the project evolves over time. Whenever we need a new different kind of data you need to add a new endpoint at the back end, this will lead to slowing down the entire process in major projects.
 
Scenario  2

Another scenario would be using query parameters as below:

eg: Get/post?data=abc

So on this Get/post route above, we check the value of the query parameter. Based on the value we return a subset of data. It is certainly better compared to scenario 1. But in complex API projects this scenario will make it more complex to understand.
 
Scenario - 3

Now let's understand how GraphQL will help in this requirement. Using GraphQL we can build the backend which exposes end points/single endpoint. GraphQL is very flexible in exposing query language to frontend.

So then frontend developers can request all kinds of data and get what they need which is required.

I hope you understand now why we choose GraphQL over Rest API.
 

How does GraphQL work at the backend ?

 
Ok, we all know that with Rest api we will send Get/Post/Put request to server. But in GraphQL it works totally differently.

Do you wonder what I mean  if i say GraphQL always sends Post request even if it gets the data from server?

Yeah, it's true. We have only one single endpoint i.e., Post/GraphQL.

Now the question is why does GraphQL use only a singleend point. The reason is that GraphQL basically exposes query language to the front-end similar to SQL/NOSQL etc.,

Then frontend will send a command to the backend with such a post request to fetch the data.
 
The query expression looks like this, this is what we send as text in post body to graphQL end point.

Why GraphQL Is An Alternative Over React API
  • Query: Operation Types
  • User: End Points(object)
  • Name,Age : Requested Fields
There are 3 different Operation types in GraphSQL listed below:
  • Query: It is a Post request in GraphQL to retreive the data.
  • Mutations: It helps to change the data.
  • Subscription: This is implemented by web sockets, if we want to push updates from server to client, we need an established websocket connection to do this.

Conclusion

 
By the end of this article, we learned:
  • What is GraphQL ?
  • How does GraphQL work?
  • Why is GraphQL an alternative to Rest API?
  • Real time scenario using GraphQL. 
  • Types of Operations in GraphQL .
Would you tell us how you feel about this article?
 
LIKE || SHARE || COMMENT
 
Happy Learning.