Intro to GraphQL

Have been hearing the word GraphQL quite a lot nowadays? But not sure what it really is? Then through this blog, I'll try to answer your question.

To begin with, let's recap what are APIs and what is REST API

API

An API, or application programming interface, is a set of rules that define how applications or devices can connect to and communicate with each other.

REST API

REST API is an API that adheres to the design principles of REST, representational state transfer. To put it in simple terms, in REST we follow certain ways to access data between systems. i.e. for example a REST API would use a GET request to retrieve a record, a POST request to create one, a PUT request to update a record, and a DELETE request to delete one.

GraphQL

If you are wondering why we just recapped API and REST API, it is because - the topic of the day - GraphQL is also similarly an open spec for a flexible API layer. It gives us a new structure/protocol to interact with data.

More in Detail

Let's take a scenario and try to explore how GraphQL works in comparison with REST.

We are working on an eCommerce application and we need to fetch details about a particular user. In the REST way, we do the following

//GET http://ecomm.api/users/:id
user = {
 name: "test",
 email: "test@test.com"
}
//GET http://ecomm.api/users/:id/orders
orders = [
 {
   id: 1,
   items: [...],
   total: 500
 }...
]

We reach out to different endpoints to fetch the data we require. Or, we create a new endpoint that would return the exact data structure we require. Now let us see how it's done is GraphQL.

query {
  user(id: "1234"){
    name
    email
    orders {
      id
      total
      items{
        id
      }
    }
  }
}

//This will return us back
userData = {
   name: "test",
   email: "test@test.com",
   orders: [
      {
         id: 1,
         items: [{
           id: 22
         }],
         total: 500
      }
    ]
}

So, what changed? what is the difference? what are the benefits?

In the case of REST, we reached out to the designated endpoint to retrieve the already structured data. In GraphQL, we send query which defines the structure of the response we expect/require.

Get what you need, not less - not more

With GraphQL, now the consumer defines exactly what it needs to the granular level.

So you are not fetching any field that is not required. This leads to a rapid reduction in bandwidth usage, reduces the n number of endpoints to be created for each requirement.

Also you don't need to reach out to different endpoints, which leads to fewer network calls and in turn a faster application for the user.

Schema Driven

Now that consumer decides the what must be the structure of the data, it is necessary that the consumer has a knowledge of what fields are available.

GraphQL achieves this using Schema. This schema serves as the contract between the client and the server to define how a client can access the data. The Schema contains a strong type for each field that is available in the API.

Lesser dependency between frontend and backend teams

Once the schema is defined, the teams working on frontend and backends can do their work without further communication since they both are aware of the definite structure of the data that’s sent over the network. This brings in the capability to have faster iterations in development.

Conclusion

GraphQL opens a new paradigm for data transfer between the client and server. Backed by a strong community it will open doors to different design systems in building applications. Every technology comes with its own merits and limitations, hence it's best to explore the possibilities and decide what is useful for a particular business problem.

Through this, I have tried to just explain what is GraphQL at the surface and there is more to understand in detail about the technicalities. If you wish to explore more GraphQL comes with some great docs. Here are the ones I used to gain knowledge.

Happy coding! ✨

If you found this article useful follow me on LinkedIn & Twitter to be part of my journey.

Tejas's Blog