Beginning with GraphQL
I have been patiently listening to this hype of GraphQL since some time now. And I just couldn’t stop thinking about it, just like I couldn’t stop thinking about her. Ah, life sucks!
Anyways, after listening to ‘I don’t trust myself loving you’ a million times and parallelly looking out for basic stuffs on the usage, clear cut objectives of GraphQL and not ending up finding it easily. I decided to write about GraphQL myself.
If you are an absolute beginner at graphQL — you have come to the right article . I’ll try my best to cover all that will give you a good idea around this topic.
What is the objective of GraphQL ?
GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. Remember - it is not a replacement for query languages like sql or mongo.
Instead of writing something like :
select name, roll, marks from student ;
You would describe a json like schema in graphQL:
{
project { name
roll
marks
}
}
How is it different from Restful services ?
In restful services you define endpoints for every use case. Like for example you need to perform crud operations — you will define 4 endpoints. In GraphQL, there will always be one endpoint and you will just pass all the information you can from the frontend so that the backend can easily look for the operation you are interested to perform. GraphQL reduces all your endpoints to a single endpoint.
Where can we use GraphQL ?
As middlewares. Consider there’s a frontend application ‘A’ which is dependent on multiple applications to aggregate data. We call multiple endpoints, do tons of filtering, manipulation on data in the frontend codebase before showing it to the client side browser. With the startup growing, we now have one more frontend application ‘B ’using same kind of logic of manipulation and filtering in frontend. We now decide to do move out the manipulation/filtering from apps A and B to a middleware for design principles. Now we also want to define the structure of payloads so that there’s no discrepancy or confusion on what payload to use as request and responses. That’s where GraphQL comes into the picture with it’s defined schema use case to Restful architecture.
This is just a simple use case where I am using it currently, it can used in multiple different business use cases.
Why to use GraphQL ?
Over fetching and under fetching is a common problem in restful architecture. You call multiple endpoints for a particular use case of frontend or call just a single endpoint and perform tons of manipulations before sending data to the client side. This makes it both slower in terms of development and performance for clients. Hence by having the request and responses schema fixed for a use case in the frontend, GraphQL makes the performance faster and development structured.
See, it is pretty obvious that restful architecture has been around for a real long time now, and so it has its own benefits and there are new libraries which try to make the performance faster as well. One of the great use cases for now is to implement GraphQL in such a way that it enhances and complements your current restful architecture without completely replacing it.
Short Practical guide:
Basically we need to define our schema on both the layers here — frontend and backend. Frontend will pass the schema details that it wants as response, backend will also have the same schema defined which will be passed as response.
On the frontend one can use apollo-boost https://www.npmjs.com/package/apollo-boost to integrate graphQL with the frontend library being used.
Consider that your backend code is on nodeJS with an express framework. One can use this https://github.com/graphql/express-graphql node module to connect GraphQL to express.
As I had mentioned earlier — You just need one endpoint in GraphQL . We have named it “/graphQL” . We pass schema as an additional parameter to the API which is a file containing all the queries, mutations to perform CRUD operations on database of your choice.
Here is an example of what the queries look like in GraphQL :
The above screenshot helps find the books with the id passed as parameter. “findById” is a simple mongoose API where it will find the books by matching id on database. Type is basically the schema for your Book collection on a database which is returned as response . GraphQL is not a replacement for mongo/sql queries, it is an effective way of communication with the API so that we can replace numerous endpoints with just one on the basis of payloads.
The above screenshot is a way to fetch details from db — similar to a select clause of sql. Add, Update, Delete can also be performed easily with the use of mutation in graphQL.
This is the backend code to save new book details to the db.
From the frontend we need to pass name of the book and addBook as the schema name to identify the operation. Easy, eh!
On the React frontend side we need to use two more libraries to bind the GraphQL to the React components.
https://www.npmjs.com/package/apollo-boost
https://www.npmjs.com/package/react-apollo
This is what the main file in frontend would look like :
That’s pretty much it on the practical guide.
Summary
This is a very basic guide to understanding what GraphQL is, where and why it should be used. Hope this gives you basic idea on GraphQL and helps you to proceed further on your learning journey.
