What is GraphQL?
By: Tinku Kalita
Tags: API, JavaScript, Programming, Web Development, GraphQL

What is GraphQL?

The new way to create APIs

Here’s what the official website says:

GraphQL is a query language for APIs.

What on earth does that mean?

For this, we need to know what an API is. Feel free to skip ahead if you know this already.

In simple terms, an API is a link between the frontend of the application and its backend. Whenever a page request data, it calls an API to deliver the data it requested. The API then brings back the data to the frontend for display.

Let’s take the example of Trivago, which is a hotel booking website. When you look up for a hotel, it collects data from all different hotel booking websites and brings all of the data to its own frontend for display. It does not bring templates from those sites and display it as it is, but just the data. This is the heart of APIs.

APIs just returns information rather than templates to the frontend.

What are the use cases for an API ?

How do we use a frontend framework like Vue.js with a backend framework like Laravel and still use the power of SPAs? The answer to this is using an API. Another use case is when your backend needs to serve many different applications. Let’s say, you have an iOS application, an Android application and a webpage. You’ll want to use an API for this scenario, as you don’t want to create three similar backends serving three different platforms.

Okay, that was a brief introduction of APIs. Now back to GraphQL.

Now one of the dominant ways of creating an API is using the RESTful approach, and the APIs built, as you’d guess, are called REST APIs. One other way is, of course, using GraphQL.

Let’s take a scenario. We have to create a newsfeed, similar to the one on Facebook. If you don’t know what a newsfeed is, it is the page you see when you log in to Facebook. It has all kinds of post. It is quite complex, but for our case let’s make it simple.

Let’s say every feed (or post) has an author and the content of the feed. How do we pull out all those information stored in our backend and display it in the frontend? Here I don’t want to go to the more traditional approach, where both the backend and the frontend is one single piece. That means maybe you are not using any APIs.

First Approach — Using REST

Let’s say, our REST API has two routes or endpoints

/authors : This route returns back all the authors in my database. /{authorname}/stories : This route returns back all the stories of the author whose name is authorname.

If you don’t know what an endpoint is, it is just a fancy word for route.

To populate our newsfeed, we have to first hit (or go to) the authors endpoint (/authors). This will give us all the authors. Now for each author, we have to hit the stories endpoint (/{authorname}/stories).

If you think wisely, these are a lot of requests to make every time a user loads the newsfeed. This is still a very simple scenario.

One solution is to create a dedicated route or endpoint (/newsfeed), but this solution has its own caveats. I will not talk about this here.

What’s the solution to this problem? GraphQL comes to the rescue.

Second Approach — Using GraphQL

Again we want to do the same thing, because, why not? How does GraphQL helps boiling down the number of requests?

Here we don’t need to create two separate endpoints. Also we don’t need to call those endpoints at all.

GraphQL always hits a single endpoint (/graphql). There are visible benefits right off. This endpoint is not defined by you, but is present by default.

Now the important question is, how does GraphQL request all those information from a single endpoint? For this GraphQL uses something called a query. The query for the above would look something like this

Query

query{

authors{

stories{

name

content

}

}

}

In the backend, instead of an endpoints list, we make a schema. This query looks for the specific points let’s say, written on the schema. By doing this it knows what to return, and the return is in the exact same format as that of the query.

So we are calling all authors and for each author, we are requesting his/her stories, and for each story, we are requesting the name and the content of the story. Isn’t it simple and elegant? That’s the power of GraphQL.

If you saw carefully, the above query specifies what information it needs. In a RESTful approach, you can’t do that. Your application will always be blotted with information you don’t need. Now, of course there’s much more to GraphQL than just that.

Mutation

Mutation is similar to a query, but instead of requesting data from the backend, we post data to the backend. For example, during registration of an user on Facebook we would do a mutation.

mutation{

createUser(

username: "myusername"

password: "mypassword"

email: "myemail@example.com"

)

}user{

username

}

Here we are registering a user with an username, a password and an email address that the user has given. These are the arguments we give to a function createUser(). This function in defined in the schema, so GraphQL knows pretty well what to do with it. The later part is what the mutation will return us back. In this case, it returns back the user with his/her username. You can also request his email and password if you have defined them in the schema to be callable.

Resemblance with REST

GET in REST can be compared to Query in GraphQL. POST in REST can be compared to Mutation in GraphQL.

I would recommend you to go through the official documentation and look for GraphQL on YouTube.

That’s a little introduction (or you can say a beginner’s perspective) to GraphQL from my side. Be sure to checkout the official website of GraphQL.

I have created an open-source project using Vue + Laravel + GraphQL. If you want to know more about the integration or any other details on the project, let me know. Want to see the project, here’s the link.

If you want to use GraphQL with Laravel, there is a nice package called Lighthouse. It will make working with GraphQL easier for you in Laravel.

In the frontend you can use Apollo GraphQL. If you love Vue like I do, here is a package which makes working with Apollo GraphQL easier.

Here is an article to setup a GraphQL server on Laravel using Lighthouse.

And that’s it. I hope you enjoyed this little introduction. See you soon..

A note from JavaScript In Plain English

We have launched three new publications! Show some love for our new publications by following them: AI in Plain English, UX in Plain English, Python in Plain English — thank you and keep learning!

We are also always interested in helping to promote quality content. If you have an article that you would like to submit to any of our publications, send us an email at submissions@plainenglish.io with your Medium username and we will get you added as a writer. Also let us know which publication/s you want to be added to.