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 for a REST API. I assume you already know what REST API is. It has a couple of endpoints 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 the front end.

So, here we can question, when Rest API is doing all this, why is GraphQL an alternative to this Rest API?

The answer is, that GraphQL offers the same features that Rest API gives, but additionally, GraphQL is highly flexible.

So how flexbile is GraphQL? To make it clear let's see what are the limitations of 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.

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 achieve 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 a 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.

e.g

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 endpoints/single endpoints. GraphQL is very flexible in exposing query language to the front end.

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 chose 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 requests to the server. But in GraphQL it works totally differently.

Do you wonder what I mean if I say GraphQL always sends Post requests even if it gets the data from the 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 single 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 the post body to the graphQL endpoint.

• 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 retrieve 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.