Bendegúz Hajnal

web development blog

GraphQL introduction

2020-01-31 Bendegúz Hajnalgraphql

What it is

GraphQL is a modern Query Language, backed by Facebook. It is an alternative to REST-based architectures. It is used heavily in production, by organizations of all sizes.

This language gives you a complete, easy to understand description of the data available. It also provides the client (the browser/app) the ability to ask only the necessary data, and leaving out the unwanted, in contrast to the traditional REST APIs, where the data provider decides what, and in what form it gives.

Why use it

You can ask for only the part of the data you actually need. Let’s say you keep data of your cats. You want to list your cats in an app by their name and a picture of them. You only want to show additional information about the cat, when it’s image is clicked, in a new view. So for this part, you only need basic data from your database.

query getCats {
  cats {
    name
    imageURL  # a string, to be used in a <img>'s src attribute
  }
}

This will give you an array of your cats, so you can list them easily.

Now, you click on a cat’s image. Let’s say, you track their position, and you show it on a map, so they don’t get lost, you can also check their most favorite food, in case you forgot it. You display the other cats too, who it often plays with.

query getCatByItsName($name: String!) {
  cat(where: {name: $name}) {
    name
    imageURL
    position {  # numbers
      xCoord
      yCoord
    }
    favoriteFood
    bestBuddies { # this will result in an array of the same type (cat)
      name
      imageURL
    }
  }
}

As you can see, you have full control over what data you get from the database. Apps using GraphQL are fast and stable since they control the data they get, not a server.

What if you also wanted to show the weight of individual cats in your app? I wouldn’t call it a hard task, you just need to add “weight” into the above query, and use it. Whereas in typical REST architecture, you would have to dig into the backend code (of course you still have to if you manage your own GraphQL based backend, and weight isn’t yet defined in the schema).

You can get many types of resources in a single request. GraphQL queries follow references between types (as seen above on the position type for example). While using a REST API, it’s usually required to load from multiple URLs, GraphQL APIs get you all the data your app needs in one request. Apps operated by GraphQL can be quick on slow network connections, which is important since mobiles are playing a larger and larger part of the internet today.

REST API

Image: Seobility

GraphQL APIs are organized in terms of types and fields, not endpoints. Imagine changing an endpoint in the backend code, now you need the frontend to match it. Whoops, you left the last character, s from “/getCats”. You go ahead, append it. Now you realize something’s not right, POST http method shouldn’t be used here. Years back your colleague, when he implemented this endpoint, didn’t care about REST’s architectural constraints. You don’t like ugly code, so now you need to switch it to listen for GET request on /cats. Then, you have to change the frontend code again. GraphQL, on the other hand uses types to ensure applications only ask for what’s possible and provide very clear and helpful errors automatically.

There are powerful developer tools for GraphQL. You can know exactly what data you can request from your API without leaving your editor, and can take advantage of code intelligence. There are tons of tools you could use, and easy development is beneficial for everyone.

You can write your server in a lot of languages easily, and there are tons of libaries you can use, to get the data from your backend.

Make this year the time you learn GraphQL, you will benefit a lot from it. For further reference, I recommend the official tutorial

  • © Bendegúz Hajnal 2020