Consumindo uma API em GraphQL sem o uso de bibliotecas ou frameworks

GraphQl Logo

Olá pessoal, a ideia deste artigo é mostrar como consumir uma API em GraphQL utilizando apenas o JavaScript puro sem o uso de nenhuma biblioteca ou framework.

GraphQL

GraphQL é uma linguagem de consulta para sua API usando um sistema de tipos que você define para seus dados.

Exemplo de uma consulta:

{
  todos {
    id
    title
    completed
  }
}

O resultado seria algo do tipo:

{
  "data": {
    "todos": [
      {
        "id": "5b0db3b0c067ae1200485647",
        "title": "Estudar GraphQl",
        "completed": true
      },
      {
        "id": "5b0dc7dc952f741c989d6d0e",
        "title": "Escrever artigo",
        "completed": false
      },
    ]
  }
}

O intuito deste artigo não é explicar sobre o GraphQL, mas caso queira aprender sobre eu recomendo acessar este site:

How to GraphQL - The Fullstack Tutorial for GraphQL

Consumindo uma API em GraphQL

Há diversas maneiras de se consumir uma API em GraphQL e você não precisa necessariamente usar uma biblioteca para isso. É possível fazer com apenas poucas linhas de código, veja como é simples

Vamos utilizar a Fetch API para fazer nossa requisição passando a query e as variáveis no corpo da requisição.

Função que consome a API

Para mostrar o uso desta função vou usar uma API que retorna informações sobre um pokémon https://graphql-pokemon.now.sh/

Gif mostrando o uso da função

Abaixo coloquei um código de exemplo que consulta uma lista de tarefas e adiciona uma nova tarefa através de uma mutation:

Obrigado por ler este artigo até aqui, abraços!