GraphQL API Tools and Queries

Hello, welcome to another article in the GraphQL + JavaScript series, this is the third article in the series but if you are only interested in the topic of this article, feel free to read because I don't use any of the previous articles as a reference so that you have to go back to them to get some concept.
If you have not read the previous two articles, and want to follow the complete series until the creation of the API, I recommend that you read the first two articles because they have a very important content.
At the end of this article you will know what are the tools of the GraphQL API and also how to make a simple query in a GraphQL API.

Let's do it!

GraphQL API tools

The GraphQL community has already created several open source tools that allow you to interact with the APIs. These tools allow you to write queries using the GraphQL query language and send them to endpoints in order to receive a response in JSON format (in the next article you will understand why responses are received in this format).
In this series I will use the two most popular tools used to test GraphQL queries in a GraphQL API. These tools are: GraphiQL and GraphQL Playground.

1. GraphiQL
Created by Facebook, GraphiQL is one of the most used tools for querying GraphQL APIs.
It is an integrated development environment (IDE) that can be used in the browser or you can download it to your computer.
GraphiQL is a very interactive tool that offers automatic completion (auto-complete), warning in case of errors and allows you to see the results of your queries directly on it.
Most public APIs come with a GraphiQL interface that allows you to query them within the browser.
The GraphiQL interface is composed of two panels. The left panel that allows you to write queries and the right panel that shows you the result of the queries.
In the upper right corner, you can click on Docs to view the service's documentation and learn how to interact with it. This documentation is added to GraphQL automatically because it is read through the service schema.
A schema defines the data available in the service, and GraphiQL automatically creates documentation through a query that it makes to the schema.

2. GraphQL PlayGround
This is another tool widely used to explore GraphQL APIs. It has the same functions as GraphiQL but comes with a few more features and is more fun.
The most interesting feature that GraphQL Playground has, is the ability to send custom HTTP headers, a feature that will be covered in the next articles when we talk about Authorizations.
GraphQL Playground works in the browser, after being given an endpoint so that you can make queries on it. It also has a desktop version that you can download from the website.

GraphQL public APIs
One of the ways you can use to practice queries over a GraphQL API is by using a public API within the tools mentioned above. The same will be done in this series.
You can find many examples of public GraphQL APIs here.

Introduction to GraphQL Queries

(Hehehe finally...)

Queries in the context of GraphQL are operations used to request data from an API. A query is actually an exact description of the data you want to receive from a GraphQL server.
When you send a query, you ask for data units for each field in the query, and if this query is correct, the server sends a JSON response that contains the fields filled with data from the fields you specified in your query.

Whenever a query is executed against a GraphQL server, it is validated against a type system.
Every GraphQL service defines types in a GraphQL schema. You can think of a type system as a blueprint for your API’s data, backed by a list of objects that you define. For example:

type person {
    id: ID!
    name: String
    birthYear: String
    mass: Float 
    height: Float
    gender: String
    eyeColor: String
}

When making a query we must specify which fields exactly we need as an answer.
Suppose we want the name, gender and birth year of the person who has id = 7.
The query would be done as follows:

query {
    person(id:"7"){
        name
        gender
        birthYear
    }
}

And we would have an answer similar to this:

{
    "data":  {
        "person": {
            "name": "Calleb Miquissene",
            "gender": "Male"
            "birthYear: "2000"
        }
    }
}

It is possible to see that the answer is given in JSON format and only the data requested in the query is returned.
Now let's make a query in a public API. I chose API Countries, which has information on continents, and languages ​​based on a list of countries.
When you access the API, it takes you directly to the GraphQL Playground.
By clicking on the Docs tab on the right, you can access the documentation to see the types existing in the API and learn how it works.

Our first query should show the name, capital, currency, continent and language of the country whose id is "MZ".
For this we will make the query based on the existing types in the API.

Query:

query{
  country(code:"MZ"){
    name
    capital
    currency
    continent{
      name
    }
    languages{
      name
    }
  }

}

GraphQL server response:

And we come to the end of another chapter in this series. I hope you liked it!
If you have any comments, doubts or suggestions regarding this article, leave it in the comments and don't forget to leave your ❤!