what is graphql and its basics

w

Hello, Folks!

GraphQL is a new technology that is rapidly gaining interest and adoption, and it has been challenging the current convention of REST API’s since Facebook open sourced it in 2016. It is one of the most exciting technologies with the opportunity to transform how we build web applications. This blog will help you to understand the concepts of the GraphQL.

GraphQL is neither a library, nor a framework, nor a database. It’s a language. It’s just a specification on how an API should work. A GraphQL API can be served and consumed from all kinds of languages. The languages are JavaScript, Swift, .NET, Java, Ruby and many more have robust implementation.

What is GraphQL & What problem is it trying to solve?

GraphQL is a query language for APIs and a runtime for fulfilling queries with your existing data. GraphQL provides a complete description of the data in your API through schemas. It gives clients the power to ask the data that they need and nothing more, making it easier to evolve APIs over time and enabling powerful developer tools.

The core purpose of API is to define the data that a client can load from a server, but unfortunately, REST doesn’t provide an adequate solution.

On the other, GraphQL provides an interface for querying the APIs in a much more intuitive manner.

Note :

GraphQL enables declarative data fetching where a client can specify what data he needs from an API. Apart from that, a GraphQL server only exposes a single endpoint and respond with precisely the data a client has asked unlike REST API exposing multiple endpoints that return fixed data structures, This itself boots your app performance.

The problem :

In simple words, REST endpoints provide way for clients to work with information. Each endpoint represents a single entity, and GET (Read), POST (Create), PUT (Update) or DELETE calls can performed on it.

Having single endpoints for each entity means that client must make several calls to populate a UI that displays multiple entities.

Also endpoints return a fixed data structure, so clients will usually under or over fetch information, resulting in unnecessary data transfer.

Finally, the entity structure is not flexible enough when trying to manipulate several pieces of data at the same time. It’s not uncommon for clients to perform a high number of calls to the API to solve a single problem.

How does it solve these problems?

Consider a common where you want to fetch user profile. Let’s assume this user profile, has three elements:

  • User Details – username, profile image.
  • Blog posts – Last three blogs of the user.
  • Followers – Number of followers and following of the user.

With a REST API you would likely need to query three separate endpoints to retrieve these fields, and it’s likely that you would not need the entirety of the data from each endpoint for the content on the page.

A typical REST API response.

This is the GraphQL response.

A typical GraphQL query

The above image represents the communication between clients and a GraphQL server. In this scenario, clients of a blogging application need to show the posts of a specific user, together with his last 3 followers.

First of all, the client will always be performing POST operations and placing a query in the body. This query contains what information the client is requesting. In this case, the name of the user, the title of his posts and the name of his last 3 followers.

The server will respond with a JSON object containing only the information the client needed.

This approach solves the under or over fetching of data (because the client gets only the data it asked for), the amount of requests (only one request was done even though we were requesting information on two different entities), and finally it provides flexibility to the client developers to define what data they need.

This is how the GraphQL simplifies the complexity in REST API.

If you to check the response of a query in GraphQL, click on the below link.

https://lucasconstantino.github.io/graphiql-online/

It’s having dummy data, just try to add some values and check the response by clicking on the run button at the top left corner.

That’s it.

Thank you & keep learning.. 😊

About the author

iamsparkler

Add comment

Leave a Reply

Most common tags

%d bloggers like this: