GraphQL. What is that?

According to its documentation, “ GraphQL is a query language for the API.”Traditionally, with the REST API, you have all kinds of endpoints where you get access to different data or can change the data in some way. This can become quite cumbersome fairly quickly, and can also become a bottleneck if you work with separate frontend and backend teams. GraphQL becomes really useful as our applications evolve over time and have to display different data.

Sacha Grief wrote a terrific analogy in his article “So what is GraphQLthat I keep hearing about?”.

The old REST model is like ordering pizza, then getting food delivered, and then calling the dry cleaner to get your clothes. Three stores, three phone calls.GraphQL, on the other hand, is like a personal assistant: once you’ve given them the addresses of all three locations, you can just ask for what you want (“give me my dry cleaning, a big pizza, and two dozen eggs”), and wait for them to return.

GraphQL is also language agnostic (i.e. you can use GraphQL with any programming language) and it lives between your client and your data sources, so it is very flexible!

Graphql is an IDE built into the browser for studying GraphQL queries GraphQL. This will help you write queries for extracting and manipulating data.

The syntax of a GraphQL query is very different from the SQL queries you can use-they look more like JavaScript objects.

For example, to get all our data, our query will look like this:

query GetPixels {
pixels(order_by: { id: asc }) {
id
color
}
}

First, we call our queryGetPixels. Then we specify that we want to get data from our table pixels. We also say that we need data from columns idandcolor. If you omit one, you just get the data from that column back.

We can also change the query so that it always orders pixels by their IDs:

query GetPixels {
pixels(order_by: { id: asc }) {
id
color
}
}

We can also writesubscriptions, which are queries that are also subscribed to changes in data via websockets.

Changing the meaning of a word querythesubscription queryin the above example will allow us to extract new data as it is updated.

In addition, GraphQL has mutations, which allows us to update data.

For example, the following request allows us to update the color of a pixel based on its ID:

mutation changePixelColor($id: Int!, $color: String!) {
update_pixels(where: { id: { _eq: $id } }, _set: { color: $color }) {
returning {
color
id
}
}
}

This mutation is calledchangePixelColor, just like a programming function, mutations (and queries) can accept arguments. In this case, it acceptsan id, which is an integer, andcoloris a string. We need to specify a table for the query, in this casepixels, which we can do by typing update_pixels. Then we'll adda where clause- we're just going to update the item in the database that matches the specifiedid. Then we specify_set, where we say that we will set the color of our string to the specified one.

Then we add returningwith data that we want to send back to our app as soon as our request is completed.

I strongly recommend testing these queries in GraphIQL and using them to build custom queries!

Here’s the GraphQL documentation GraphQLif you want to go deeper!