GraphQL 101 Challenge
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.
Prologue
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.
https://api.skypicker.com/locations?term=LongyearYou can explore this endpoint at https://docs.kiwi.com/locations/
For educational purposes update the URL, so we get only 1 location.
https://api.skypicker.com/locations?term=Longyear&limit=1🔬 Open the link in your browser and explore the response. For better parsing of the JSON, I recommend using JSON Viewer
The problem
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 isname andcode.
The 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 POST request.
What is a query?
You can treat queries as a template for your future response. In our case, we would like to get name, code and locationId from the Location object.
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 name, code and locationId
Your task
✅ 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 type.
Your task
✅ 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 Longyear
Your task
✅ add an argument to search only for a location using the term Longyear
Conclusion
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.
Challenge
🏅extend the query!
get the name of the continent for each location
🏅🏅list the airports only!
get the code and name of 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 code@kiwi.com until Monday, July 20th. We’ll reward the first three submitters with our Kiwi.com branded swag.
Happy testing!
Author
👋 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.
