The 3 Essentials to get you started with GraphQL (With Examples)

#graphql #api

As a developer, you might have seen GraphQL APIs around. If you are not very familiar with it, it will give you a hard time.

This article is to give you a starter pack regarding GraphQL, all the essentials packed into a single article.

Let's begin!

1. What is basically GraphQL?

We can term GraphQL this way:
It is a query language for APIs that lets users ask exactly what they need.

Let's see an example

You can try this out yourself. Just do the following:

Go to https://countries.trevorblades.com/
Here, let's do a query for a country. We need the name, native, currency, and the emoji for the country. So those are the four things we need.

Paste this and press Play:

query {
  country(code: "IN") {
    name
    native
    currency
    emoji
  }
}

You will get the following data, which includes the fields you asked for:

{
  "data": {
    "country": {
      "name": "India",
      "native": "भारत",
      "currency": "INR",
      "emoji": "🇮🇳"
    }
  }
}

That's the basic idea of GraphQL. Now let's dive deeper.

2. GraphQL Schema

You have to define what data exists and how it can be queried.

Let's see an example of a User schema:

type User {
  id: ID!
  name: String!
  age: Int
}

type Query {
  user(id: ID!): User
}

Let's break this down:

There is a User.
This user has fields id, name, and age.
You can query a user using user(id).

3. Queries

A query is just a structured request.

A basic query is just like what we saw earlier:

{
  user(id: 1) {
    name
    age
  }
}

We can have nested versions as well:

{
  user(id: 1) {
    name
    posts {
      title
      comments {
        message
      }
    }
  }
}

As you can see, we can be selective about what to display. That's the power of GraphQL.

Let's try an example:

Go to https://countries.trevorblades.com/
Try this query:

{
  continent(code: "SA") {
    name
    countries {
      name
      capital
    }
  }
}

This gives the following output:

{
  "data": {
    "continent": {
      "name": "South America",
      "countries": [
        {
          "capital": "Buenos Aires",
          "name": "Argentina"
        },
        {
          "capital": "Sucre",
          "name": "Bolivia"
        },
        {
          "capital": "Brasília",
          "name": "Brazil"
        },
        {
          "capital": "Santiago",
          "name": "Chile"
        },
        {
          "capital": "Bogotá",
          "name": "Colombia"
        },
        {
          "capital": "Quito",
          "name": "Ecuador"
        },
        {
          "capital": "Stanley",
          "name": "Falkland Islands"
        },
        {
          "capital": "Cayenne",
          "name": "French Guiana"
        },
        {
          "capital": "Georgetown",
          "name": "Guyana"
        },
        {
          "capital": "Lima",
          "name": "Peru"
        },
        {
          "capital": "Asunción",
          "name": "Paraguay"
        },
        {
          "capital": "Paramaribo",
          "name": "Suriname"
        },
        {
          "capital": "Montevideo",
          "name": "Uruguay"
        },
        {
          "capital": "Caracas",
          "name": "Venezuela"
        }
      ]
    }
  }
}

What's next?

Okay, that's your essential starter kit, just enough to get you going.
Once you are done familiarising yourself with this, you can try playing with these concepts in some real-world products.

There is more to GraphQL; we will explore that in the next part of this article.

Since you have read this far, let me give you a bonus.
As developers, we often face pain and frustration with repetitive tasks, searching for reliable resources, assets, etc., and the list goes on…

To solve such issues, let me recommend a platform. It's free, open-source, and built with developers in mind.