Para quem não conhece, o GraphQL é uma linguagem de consulta que permite que uma aplicação (client-side) faça requisições em um servidor X, retornando somente os dados que realmente precisam ser exibidos.

Para ficar mais claro, imagine o seguinte cenário: você precisa exibir uma lista contendo os seis últimos times classificados no Campeonato Brasileiro da Série A. Abaixo, você tem uma imagem ilustrando esse exemplo (essa lista não está atualizada):

Note que essa lista contém os seguintes dados:

• Posição do time no campeonato
• Escudo do time
• Nome do time
• Quantidade de pontos

Pensando em um retorno .json, você teria algo parecido com o exemplo abaixo:

1
2
3
4
5
6
7
8

[
  {
    <span style="color: #997700; font-weight: bold;">position:</span> posicao,
    <span style="color: #997700; font-weight: bold;">points:</span> total pontos,
    <span style="color: #997700; font-weight: bold;">teamName:</span> <span style="background-color: #fff0f0;">"Nome do time"</span>,  
    teamShieldImage<span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">"url do escudo"</span>
  }
]

Para o nosso exemplo anterior, esses dados atendem, mas e se você precisar de mais informações, como: nome do técnico, sigla do time e quantidade de faltas? A forma mais simples será fazer mais requisições ao servidor, né?

Mas essa solução irá gerar:

• Mais requests
• Implementação mais complexa, com mais regras de negócio
• Tráfego de dados desnecessários

Como mencionado acima, além do seu código ficar mais complexo, você irá trafegar dados desnecessários e acabar consumindo mais banda do seu usuário.

Agora, adicionando mais complexidade a nossa task, imagine que a sua API precisa ser distribuída para outros sistemas. Como você resolveria essa task? Criaria mais endpoints? Ou uma API para cada sistema?

Nesse ponto que entra o GraphQL. Ele permite que você crie um endpoint que retorna todos os dados necessários para todo os seus clients.

Para ficar mais claro, vamos atualizar o retorno do nosso .json criado acima para o Campeonato Brasileiro:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

[
  {
    technician<span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">'nome do tecnico'</span>
    qtdCardsYellow<span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">'total de cartões'</span> 
    qtdCardsRed<span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">'total de cartões'</span> 
    position<span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">'posicao'</span>,
    points<span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">'total pontos'</span>,
    teamName<span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">'Nome do time'</span>,
    teamInitials<span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">'Iniciais'</span>,
    teamShieldImage<span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">'url do escudo'</span>
  }
]

Note que eu adicionei quatro propriedades no retorno: technician, qtdCardsYellow, qtdCardsRed e teamInitials. Daí vem a pergunta:

“Não estamos trafegando mais dados do que o necessário?”

E a resposta: Não.

Como mencionado acima, o GraphQL nos permite ter um endpoint retornando todos os dados (que podem estar em cache no Redis), e caso o client solicite duas ou três propriedades em um request, ele retornará somente eles.

Abaixo, você tem um exemplo de requisição pensando na utilização do GraphQL. Note que eu estou solicitando somente os dados do nosso primeiro exemplo:

1
2
3
4
5
6
7
8
9

query {
   campeonato{
          position,
    points,
    teamname,
    teamShieldImage,
    points
   }
  }

E no caso de precisar retornar uma outra propriedade, como o nome do técnico:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

query   {
campeonato{
    tecnico,
    position,
    points,
    teamname,
    teamShieldImage,
    points
    }
  }

Bem simples, né? Esse foi só um overview de como e porquê utilizar o GraphQL. Nos próximos artigos eu irei demonstrar como implementar ele em um projeto Angular no front-end e Node.js no back-end.

Espero que tenham gostado e até a próxima, pessoal!