A practical introduction to GraphQL (not only) for QA engineers
REST was born in 2000 as Roy Fielding wanted to define the standardized way of API communication. In 2015 Facebook internally developed GraphQL as a modern and scalable way of communication between client and server. Kiwi.com adopted it for some products as well and in this article, you’ll understand in a practical way, what GraphQL is all about. You’ll learn:
- The difference between RestAPI and GraphQL
- What is the main principle of GraphQL
- How to write a simple query and execute your first request
- Challenges to practice your skills. The first three people who send us their submission will win Kiwi.com branded swag.
If you want to take a flight using Kiwi.com, the very first thing you need to do is finding your desired location. As you are typing in the name of your arrival point, the frontend proposes to you all available destinations.
From the customer’s point of view, it looks like this.
Under the hood, the page is demanding all locations from the backend based on your input. If we transform it to an API call, it is a basic
GET the request being sent to the following URL.
You can explore this endpoint at https://docs.kiwi.com/locations/
For educational purposes update the URL, so we get only 1 location.
???? Open the link in your browser and explore the response. For better parsing of the JSON, I recommend using JSON Viewer
As we send a request to the URL above, we will receive A HUGE JSON carrying all available details about our location.
When you’re fetching the data using Rest API you send a
GET request to a specific endpoint (URL enhanced with query parameters) and the server responds with an avalanche of the predefined structure of data. The client has to then cherry-pick only relevant information.
The only information from the response above, that frontend needs in order to display the destination for the customer is
id could be beneficial as well to track the destinations that the user has selected, but that is it.
If we cut down the response to these fields only, we might end up with the following, lightweight JSON.
Can we achieve it with Rest API? Yes we can, by creating separate endpoint like
/locationLight or query parameters in the URL.
But this solution doesn’t scale.
So what if there will be a versatile way of telling the server, what data the client requires, and what to include in the response?
The solution — GraphQL
The client tells the server how the response should look like. Simple as that.
By GraphQL, you get only the data you ask for. The client sends a query, which tells the server what information to include and how to build a response.
The query is usually sent in the body of a
What is a query?
You can treat queries as a template for your future response. In our case, we would like to get
locationId from the
What data you can ask for using the query depends on a schema. The schema defines a hierarchy of types with fields that are populated from your back-end data stores. The schema also specifies exactly which queries are available for clients to execute against your data graph.
???????? Enough of theory, let’s give it a try!
Let’s see how we can send the same request and get all locations, but this time we’ll use GraphQL.
#1 First query
To be able to follow the next steps, open https://graphql.kiwi.com/
You will be navigated to the editor. On the left side, you can build a query and after submitting your request, a response will appear on the other side.
In the first example, we will create a simple query telling the server that the response should only contain
✅ send a request & check the response that lists desired information about all locations.
Edges? Node? As I mentioned before, the structure of the query depends on the schema. In the next step, we will dive into the schema and traverse it.
#2 Explore the schema & extend the query
If you expand the Docs, located on the upper right side, you can inspect the structure of the schema starting with
query. We will dive deeply into the
node element that is of type
Location . This object holds all the information about the location. Obviously.
In the next example, we will traverse the schema and extend our query so we get also information about
✅ extend our query to return also
type of the location
#3 Add an argument
Until now, we have fetched all the locations in the world. But in our case, we would like to get only data about one specific location based on our term
✅ add an argument to search only for a location using the term
The server knows exactly what fields the client is asking for and how the response should look like. At its simplest, GraphQL is about asking for specific fields on objects.
I believe that after reading this article, you understand the basic principle of GraphQL.
????extend the query!
name of the
continent for each location
????????list the airports only!
country for each airport
???????????? list flags of all the countries in the world!
get all countries from the world and list URLs of images of their flags
Once you finalize the task, send it over to [email protected] until Monday, July 20th. We’ll reward the first three submitters with our Kiwi.com branded swag.
???? My name is Martin Škarbala, but my friends call me Furby(o). I am currently working as a Testing platform lead at Kiwi.com.
Join the QA community on slack, or follow me on Facebook / Linkedin
???????? You can find my online courses at learn2code, or some free stuff at youtube.