What is GraphQL?

Before we get into what GraphQL is, let's check out why we need GraphQL in the first place.

What are the problems with the traditional REST API design used for exposing data does GraphQL solve?

Let's take the Medium page of Bloomberg :-

Problems with writing REST API queries for this front-end :-

1. Over-fetching

The query for the first part that fetches the details of the user (in this case, Bloomberg) might look something like this :-

Although only the name and description of the user is to be fetched, we are fetching all the data related to that user, which results in over-fetching of data.
This can be avoided by only querying for the fields you want like so :-

But it'll get clunky and this form of querying will deteriorate in cases where there are nested fields :-

1. Under-fetching

In the part of the page where the number of followers are shown, you may use a query familiar to this :-

Notice here that we are fetching the followers data of the user in a different query from the first, whereas this could've been part of the first query we used to fetch details of the user, which results in the under-fetching of data.

Now, both these problems can be solved if we write a custom query like so :-

But this would only be efficient for use in a small app, but as the size of the app grows with many pages, and routes, and multiple interfaces between many services, this might prove to be sub-optimal.

Enter GraphQL, which will solve these issues by :-

1. No more over-fetching
2. No more under-fetching, and
3. Fetching exactly the right amount of data & routes.

Instead of three round-trips used to fetch the data for our example, we could write a GraphQL query like so :-

to fetch all data with one query, thereby only having to deal with one round-trip. Not only that, but also notice that we can provide filters to even our nested queries, followers(last : 3), and the data returned is in a format similar to the GraphQL query since both are structurally similar.

How does GraphQl work?

In GraphQl, you're gonna be creating schemas like so :-

Notice the bang sign for the name field type declaration - String! - which indicated that this field is a required field.

This schema will only be used to expose the data stored, so the password field that might exist for a user won't be included in the schema.

Relationships between entities can be established in the schemas like so :-

Every Post has an author field to store the Person who is the owner of said Post, and every Person would have a posts filed containing all the posts that they have created :-

Here, the [Post!]! type indicates that the array of Posts cannot be null, and that the posts field cannot be null as well.

There are three types of operations that GraphQL models: 1. 1. query – a read‐only fetch,

1. mutation – a write(create, update, delete) followed by a fetch, and
2. subscription – a long‐lived request that fetches data in response to source events.

Here is a collection of these types of operations :-

Benefits of a schema & type design :-

1. Self Documenting :- In scenarios where teams are working together for the development of a single app, the front-end designers will find it easier to work as with back-end developers as they know exactly what to send and what they will get back as there is a defined schema.

2. Know when backend changes are made :- If the back-end team makes any changes to the queries, or mutations, the operation will crash and the front-end designers will know right away.

3. Mock data can be made easily :- Since the types of the data elements stored in the DB are setup, it can be very easy for the front-end designers to create mock data and proceed with designing.

So how would one go about using GraphQL in a client-server model?

Resolvers are created on the server to use the GraphQL operations to interact with the data in the database.

Another cool thing about GraphQL is that they can work with more than just a database. No matter how your backend is set up, just put GraphQL in the middle to facilitate your requests so that you have complete control over how each field gets its data, making GraphQL very powerful.

So now that we've seen how GraphQL can be used, let's look at some of the common questions that people might have about GraphQL:-

1. Is it a database? :- From the name, some might assume that it is a data base, but it is a query language which works with all kinds of DBs (MongoDB, PostgreSQL, even with a graph database like Neo4j).

2. Is it only for React/JavaScript? :- No, GraphQL is just a spec you add to your system to facilitate how you query your data from the database, and can be used with an Angular front-end, and a Django back-end, for example.

I've found that the development time and ease of developing apps for my side projects using GraphQL very helpful. Plus, the support for the React/Nodejs projects, which I mainly work with is incredible. And the documentation in the official website is also top notch.