Before starting on the blog we would like to share why we are writing this when there is already a well-written document provided by the GraphQL community on the official site https://graphql.org.
Well, Here you will get an idea of how GraphQL works and how the GraphQL will implement.
According to the GraphQL community:-
“GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data.”
After spending time on understanding the GraphQL workflow using many blogs on the internet, people are still not aware of the exact use. That might be due to the reason that the blogs are focusing to start the work using GraphQL/Apollo rather than explaining the idea behind this.
It would be good for beginners If we can explain what GraphQL is and how it works rather than focusing on its code or implementation.
Let’s start with the most frequently asked questions that are misleading us:-
If we are using GraphQL we didn’t need REST APIs?
It was a negative hype and, It is not correct. GraphQL worked on the data which is provided to it. So data source can be either an API or any other source which is providing data to GraphQL.
For example, just see the below image:-
In this image, the GraphQL server will receive the data either from the REST APIs, JSON data or any of the database sources.
GraphQL is not a replacement of the REST APIs but it is a way to use the REST APIs or any other data by adding an extra layer.
If we still need the APIs to get the data, then why are we using GraphQL?
GraphQL was designed by Facebook to reduce the over and under the fetching problem of APIs. GraphQL was able to overcome this problem.
How it was reduced by the GraphQL we will understand it later in the blog.
As per the official site of GraphQL,
“GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn’t tied to any specific database or storage engine and is instead backed by your existing code and data.”
Explanation of the above lines:-
- It means that GraphQL is a query language that makes the query on the API data (like SQL for your DB).
- And also it is a server-side runtime to execute our defined queries(which is strongly typed with its data) on our data(get by API or hardcoded doesn’t matter)
- Now it is clear that GraphQL is not connecting with any DB like MySQL.
Let’s see a diagram to understand Graphql flow between the client and API:-
In the given diagram, there are two types of client-server architecture. First one is not using the GraphQL while the second one is using the GraphQL.
In the first client-server architecture, the client is directly hitting the APIs to get the data returned by the API. Once a request from the client to the API server will arrive at the endpoint. The API server will return the complete data to the client without making any further modifications.
In the second client-server architecture, we can see there is another server named GraphQL between the client and the API server. This server is containing the GraphQL implementation and it will work as middleware on the API.
In this architecture, the client will never know about APIs that will be returning the data in place and the user will be hitting the endpoint that will be provided by GraphQL.
Whenever a request will be made on the GraphQL endpoint, the GraphQL server will get the data by requesting on the API server.
Here the GraphQL will do its job that is the GraphQL can modify the API data before sending it to the client.
Let’s understand it using an example:-
Consider an application that is running on the mobile as well as on the web. And there is a user listing page in both(web & mobile) platforms.
Assume, Below is a GET API for user returning the following response:-
- Email &
Consider a user list page in the application where on the web we are showing all the 5 fields in a row and as the mobile will be having a small screen and need to show only the two fields.
Those fields are name and description of the user.
But to retrieve that we need to hit the GET API of the user which is going to return all of the above-listed fields along with the name and description, Hence, the result will be over fetched(also containing other unnecessary fields like contact, address, etc.).
Now you will be thinking that it will not be more than 1 kb of response data but consider the case when you will be needing this data on a page for multiple users(like facebook).
In that case, there will be more than 1 kb data that will be fetched from the backend unnecessarily & it will be stored on the frontend which in result will impact the app performance.
To avoid the frontend load either we need to modify the existing API or we need to create a new API that will be returning only two required fields. But doing so will result in repeated work or breaking the rule of single responsibility(SOLID principles). And also may affect some other existing functionality.
Here the GraphQL provides us the solution for this problem at hand, As we know GraphQL will be working as middleware between client and API server, GraphQL will check which API (or any other data source) we need to hit(will be defined in the query) and then it will check what data(data asked from the client(web/mobile)) it needs to return.
If GraphQL will be hit by the web then GraphQL will return all the 5(as all the fields asked in the request) fields but if it is hit from the mobile app then it will return only two fields(asked from the mobile) that are required on the dashboard.
Answer for the question “Why we are using the GraphQL?” is that it works as middleware using a server which resolves the request of the frontend by using the backend API and filter the API data as per the frontend needs.
GraphQL server reduces the number of APIs required and gives more control/ease over the APIs or the data source.