Engineering

GraphQL 101: Aqui está tudo o que você precisa saber sobre o GraphQL

June 11, 2020

min

Tabela de conteúdo

Exemplo H2

A API ou uma interface de programa de aplicativo é uma família de protocolos, comandos e funções que são usados para criar e integrar software de aplicativos. Em essência, a API é o intermediário que permite que dois aplicativos se conectem. E por anos, a API REST foi reconhecida como o protocolo padrão para APIs da web. No entanto, há uma tendência visível que poderia reverter essa inclinação em relação à API REST. Relatório sobre o estado do Javascript 2018 descobriu que, dos desenvolvedores que foram pesquisados em 2016, apenas 5% usaram o GraphQL. Já em 2018, os números aumentaram rapidamente para 20,4%. Embora esses números não representem a preferência do GraphQL em relação à API REST, isso indica claramente o crescimento significativo no número de desenvolvedores que optam pelo GraphQL em aplicativos da web.

Em uma série de duas partes sobre o GraphQL, discutimos os seguintes tópicos:

Introdução ao GraphQL
GraphQL versus REST
Busca declarativa de dados do GraphQL
GraphQL: configurações incorretas comuns que permitem hackers
Testando configurações incorretas comuns no GraphQL

Nesta parte, exploramos:

O que é GraphQL?
Como identificar uma instância do GraphQL?
Como configurar o servidor GraphQL?
Tipos de raiz do esquema GraphQL
GraphQL versus REST (focado na busca de dados)
GraphQL: Busca de dados declarativa e suave

Introdução ao GraphQL

O que é GraphQL?

É uma linguagem de consulta de código aberto para APIs que ajuda a carregar dados de um servidor para o cliente de uma forma muito mais simples. Diferentemente das APIs REST, as APIs do GraphQL são organizadas como tipos e campos e não como endpoints. Esse recurso garante que os aplicativos possam solicitar apenas o que pode ser obtido para fornecer respostas claras. A API do GraphQL busca os dados exatos solicitados; nada menos, nada mais.

Ele foi desenvolvido pelo Facebook em 2012 e posteriormente lançado publicamente em 2015. Hoje, o GraphQL é rapidamente adotado por clientes, grandes e pequenos, de todo o mundo. Sites e aplicativos móveis proeminentes, como Facebook, Twitter, GitHub, Pinterest, Airbnb etc. usam o GraphQL.

A API REST sofre com a falta de uma documentação robusta da API, dificultando que os desenvolvedores conheçam as operações específicas que a API suporta e como usá-las com eficiência. Mas o esquema do GraphQL define adequadamente suas operações, valores de entrada e possíveis resultados. Quando um cliente envia uma solicitação de consulta, a função de resolução do GraphQL busca o resultado da fonte.

GraphQL resolver

O GraphQL permite que os desenvolvedores de front-end recuperem dados do back-end com uma facilidade incomparável, o que explica por que geralmente é descrito como tecnologia de API direcionada ao front-end. Evidentemente, é mais eficiente, poderoso e flexível, além de ser uma alternativa melhor à API REST.

Como identificar uma instância do GraphQL?

Normalmente, uma solicitação HTTP do GraphQL é enviada para os seguintes endpoints:
- /graphql
- /graphql/console
- /gráfico

A solicitação do GraphQL é semelhante à do JSON, mas é diferente, conforme mostrado na solicitação a seguir:

JSON Ao testar um aplicativo web, se você se deparar com algum dos atributos mencionados acima, provavelmente ele usa o GraphQL.

Como configurar o servidor GraphQL?

Podemos executar o servidor da API GraphQL no localhost com o uso do Express, uma estrutura de aplicativos web para Node.js.

Para isso, depois de instalar o “npm”, instale duas dependências adicionais, o que pode ser feito usando o seguinte comando:

npm install express express-graphql graphql --save

Para maior clareza do conceito, é assim que buscamos dados do “hello world” do servidor GraphQL usando uma consulta.

var expresso = exigir('expresso');

var GraphQLHttp = exigir('express-graphql');


var { Esquema de construção } = exigir('graphql');

//Construa um esquema, usando a linguagem de esquema GraphQL

var esquema = Esquema de construção(`

 digite Query {

 olá: String

 }

`);

//A raiz fornece uma função de resolução para cada endpoint da API

var raiz = {

 olá: () => {

    retorne 'Olá, mundo! ';

  },

};

var aplicativo = expresso();

aplicativo.usa('/graphql', GraphQL HTTP({

 esquema: esquema,

 Valor raiz: raiz,

 gráfico: verdade,

}));

aplicativo.ouvem(4000);

console.tora('Executando um servidor de API do GraphQL em http://localhost:4000/graphql ');

Salve o código subsequente como GraphQL_Server.js.
Agora, execute esse servidor GraphQL com:

node GraphQL_Server.js

Se você não encontrar um erro, isso significa que configuramos com sucesso nosso servidor GraphQL e estamos prontos para continuar.

Navegue até o endpoint http://locahost:4000/graphql em um navegador da web em que você encontrará a interface GraphQL. Agora você pode inserir suas consultas aqui.
Depois que a consulta “hello” é emitida, ela busca os seguintes dados do servidor:

Tipos de raiz do esquema GraphQL

O esquema GraphQL tem três tipos de raiz. As solicitações no endpoint do GraphQL devem começar com qualquer um desses tipos de raiz durante a comunicação com o servidor:

Consulta: Esse tipo permite ler ou buscar dados do servidor de back-end.
Mutação: esse tipo é usado para criar, editar ou excluir dados.
Assinaturas: esse tipo raiz permite a comunicação em tempo real, para receber automaticamente atualizações em tempo real sobre eventos específicos.

GraphQL Subscription

Diz-se que o GraphQL é orientado pelo cliente, pois permite que os clientes adicionem novos campos e tipos à API do GraphQL e forneçam funções a cada campo. Em última análise, os clientes podem decidir a resposta exata de que precisam para as consultas. Ao contrário de como a API REST opera, o GraphQL permite que os clientes recuperem dados essenciais sozinhos, em vez dos dados completos.

GraphQL versus REST

Tanto o REST quanto o GraphQL ajudam os desenvolvedores a projetar o funcionamento das APIs e o processo pelo qual os aplicativos poderão acessar dados a partir delas. Eles enviam dados por HTTP. No entanto, existem algumas diferenças entre eles que provam que o GraphQL é superior.

Um diferencial importante é um método de buscar dados do servidor de back-end. Enquanto uma API REST típica envia várias solicitações para carregar dados de vários URLs, o GraphQL precisa enviar apenas uma única solicitação para obter a resposta mais precisa, deixando de fora os dados indesejados. Isso é chamado de busca declarativa de dados. Aqui está um exemplo para ajudar você a entender isso melhor.

Na API REST, várias solicitações são enviadas em vários endpoints para buscar os dados específicos ou específicos do servidor. Por exemplo, para obter o ID de um usuário, suas postagens em uma plataforma de mídia social e seus seguidores no mesmo canal, precisamos enviar várias solicitações no endpoint usando o caminho certo, como /usuário/ <id>, /usuários/id/ <posts>, e /usuários/id/ <followers> respectivamente, apenas para obter várias respostas sobre o mesmo.

REST API multiple endpoints

No entanto, no caso do GraphQL, uma única consulta, que inclui todas as três solicitações, em um único endpoint, será suficiente para recuperar respostas precisas às solicitações correspondentes. Tudo o que precisamos fazer é enviar uma consulta por meio da interface, que é interpretada em todo o esquema e retorna os dados exatos que o cliente solicitou.

Busca de dados suave e declarativa

Na instância da API REST mencionada acima, vimos que 3 solicitações foram feitas em 3 endpoints diferentes para recuperar a resposta correspondente do servidor. Mas no GraphQL, esse processo é relativamente mais fácil. Uma consulta que incluísse os requisitos de dados exatos, como IDs, publicações e seguidores em um único endpoint, funcionaria.

Vamos dar uma olhada na consulta que é enviada ao servidor para buscar o ID, as postagens e os seguidores de um usuário:

GraphQL endpoint

A imagem acima mostra como uma consulta que inclui requisitos de dados é enviada ao servidor de back-end, para a qual sua resposta é recuperada no lado do cliente.

As diferenças entre REST e GraphQL são bastante significativas e podem ser entendidas ao comparar seu funcionamento.

Difference between GraphQL and REST API

No entanto, essas diferenças não significam necessariamente que o REST não seja tão eficiente ou flexível, afinal, ele é a API padrão há vários anos. No entanto, o GraphQL está ganhando popularidade porque aborda e preenche as deficiências da API REST.

No blog da próxima semana, exploraremos as configurações incorretas comuns do GraphQL que permitem hackers e como você pode testá-las.