Tutorial GraphQL para iniciantes: o que é, recursos e exemplo

O que é GraphQL?

GraphQL é uma tecnologia do lado do servidor da camada de aplicativo desenvolvida pelo Facebook para executar consultas com dados existentes. GraphQL pode otimizar chamadas de API RESTful. Ele fornece uma maneira declarativa de buscar e atualizar seus dados. GraphQL ajuda você a carregar dados do servidor para o cliente. Ele permite que os programadores escolham os tipos de solicitações que desejam fazer.

Por que usar GraphQL?

A seguir estão os motivos para usar GraphQL:

• Ele fornece uma consulta legível por humanos.
• No GraphQL, é muito fácil lidar com vários bancos de dados.
• É adequado para microsserviços e sistemas complexos.
• Você pode buscar dados com uma única chamada de API.
• Ele ajuda você com lote e cache de consultas.
• Você não enfrenta problemas de busca.
• Adaptando as solicitações às suas necessidades.
• Ajuda você a descobrir o esquema no formato apropriado.
• GraphQL mantém automaticamente a documentação sincronizada com as alterações da API.
• A evolução da API é possível sem versionamento.
• Os campos GraphQL são usados ​​em múltiplas consultas que podem ser compartilhadas em um nível de componente superior para reutilização.
• Você pode escolher quais funções expor e como elas funcionam.
• Ele pode ser usado para prototipagem rápida de aplicativos.

Aplicações do GraphQL

Aqui estão as aplicações importantes do GraphQL:

• Ele fornece Relay e outras estruturas de cliente
• GraphQL ajuda você a melhorar o desempenho do aplicativo móvel.
• Ele pode reduzir o problema de busca excessiva para diminuir o serviço de nuvem do lado do servidor e diminuir o uso da rede do lado do cliente.
• Ele pode ser usado quando o aplicativo cliente precisa especificar quais campos são necessários no formato de consulta longa.
• GraphQL pode ser totalmente utilizado quando você precisa adicionar funcionalidade à sua API antiga ou existente.
• É usado quando você precisa simplificar APIs complexas.
• Padrão de fachada mix and mash, que é comumente usado em programação orientada a objetos.
• Quando você precisa agregar dados de mais de um local em uma API conveniente.
• Você pode usar GraphQL como uma abstração em uma API existente para especificar a estrutura de resposta com base nas necessidades do usuário.

O que você precisa aprender antes de aprender GraphQl?

Este tutorial GraphQL é baseado em Express e NodeJs. Portanto, você pode aprender GraphQL facilmente com um conhecimento básico de NodeJS.

Componentes principais do GraphQL

Agora, neste tutorial do GraphQL, vamos aprender os principais componentes do GraphQL:

Conforme mostrado na figura acima, existem três componentes principais do GraphQL: 1) Consulta, 2) Resolvedor e 3) Esquema.

pergunta

A Consulta é uma solicitação de API feita pela aplicação da máquina cliente. Ele suporta aumentos e pontos para arrays. A consulta é usada para ler ou buscar valores.

Partes da consulta:

A seguir estão as partes importantes da consulta

1. Campo:

Um campo simplesmente indica que estamos solicitando informações específicas ao servidor. A seguir está um exemplo GraphQL de um campo na consulta GraphQL.

query {
    team {
        id name
    }
}

"data": {
    "team":[ {
        "id": 1, 
        "name": "Avengers"
    }
    ,
    …
]
}
}

No exemplo GraphQL acima, solicitamos ao servidor o campo denominado equipe e seus subcampos como id e nome. O servidor GraphQL retorna os dados que solicitamos.

2. Argumentos

In DESCANSO, só podemos passar um único conjunto de argumentos como segmentos de URL e parâmetros de consulta. Para obter um perfil específico, uma chamada REST típica terá a seguinte aparência:

GET /api'team?id=2 Content-Type: application JSON
 {
    "id": 2, 
    "name": "Justice League."
}

Resolver

Os resolvedores fornecem instruções para converter a operação do GraphQL em dados. Eles resolvem a consulta aos dados definindo funções de resolução.

Ele exibe ao servidor o processo, bem como a localização para buscar dados de acordo com um campo específico. O resolvedor também separa o esquema do banco de dados e o esquema da API. As informações separadas ajudam a modificar o conteúdo obtido do banco de dados.

Esquema

Um esquema GraphQL é o centro da implementação do GraphQL. Descreve a funcionalidade disponível para os clientes que estão se conectando a ele.

Recursos do GraphQL

Aqui estão recursos importantes do GraphQL:

• Ele fornece linguagem de consulta declarativa, o que não é imperativo.
• É hierárquico e centrado no produto.
• GraphQL é fortemente tipado. Isso significa que as consultas são executadas no contexto de um sistema específico.
• As consultas no GraphQL são codificadas no cliente, não no servidor.
• Possui todos os recursos da camada de aplicação do modelo OSI.

Clientes GraphQL

Cliente GraphQL é um código que faz solicitações POST para um servidor GraphQL relevante. Você pode consultar uma API GraphQL diretamente, mas a boa abordagem é aproveitar uma biblioteca cliente dedicada usando Relay.

Esta JavaA biblioteca de scripts é desenvolvida pelo Facebook para criar aplicativos React com GraphQL. Os clientes GraphQL podem ser um CMS como Drupal, um aplicativo de página única, um aplicativo móvel, etc.

Servidores GraphQL

Os servidores GraphQL são implementações do lado do servidor da especificação do GraphQL. Ele descreve seus dados como API GraphQL, que seu programa cliente pode consultar para obter o banco de dados.

Gateways GraphQL

Gateway é um padrão de microsserviço onde você pode construir um serviço separado para lidar com outros serviços de back-end. Ele oferece documentação viável e uma maneira conveniente de coletar dados de mais de uma fonte com uma única solicitação.

GraphQL tem uma boa maneira de fatorar os valores dinâmicos da consulta. Ele os transmite como um dicionário separado. Esses valores são conhecidos como variáveis. Sempre que trabalhamos com variáveis, precisamos fazer as três coisas a seguir:

1. Substitua o valor estático na consulta por um nome de variável.
2. Declare o nome da variável como uma das variáveis ​​aceitas pela consulta GraphQL.
3. Passe o valor no dicionário de variáveis ​​específico do transporte.

Aqui está o que parece tudo junto:

query HeroNameAndFriends($episode: Episode) {
  hero(episode: $episode) {
    name
    friends {
      name
    }
  }
}
{
  "episode": "JEDI"
}
{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        }
      ]
    }
  }
}

Como você pode ver no exemplo GraphQL acima, simplesmente passamos uma variável diferente da necessidade de construir uma nova consulta.

O que é mutação?

Uma mutação é uma forma de alterar o conjunto de dados no GraphQL. Ele modifica os dados no armazenamento de dados e retorna um valor. As mutações ajudam você a inserir, atualizar ou excluir dados. Geralmente, as mutações são definidas como uma parte do esquema.

Pontos a serem considerados ao projetar mutações do GraphQL

Aqui estão os pontos importantes ao projetar o GraphQL:

• Nomeação: Em primeiro lugar, você deve nomear o verbo de sua mutação. Em seguida, o substantivo ou “objeto”, se aplicável. Use camelCase ao nomear mutações.
• Especificidade: Você tem que tornar a mutação específica tanto quanto possível. As mutações devem representar ações semânticas realizadas pelo usuário.
• Objeto de entrada: Use um tipo de objeto de entrada único e obrigatório como argumento para executar a mutação no cliente.
• Tipo de carga útil exclusivo: Você deve usar um tipo de carga exclusivo para cada mutação. Você também pode adicionar a saída de mutação como um campo para esse tipo de carga específico.
• Aninhamento: Use o aninhamento para sua mutação sempre que fizer sentido. Ele permite que você utilize totalmente a API GraphQL.

Diferença entre GraphQL e REST

A tabela a seguir mostra uma diferença importante entre GraphQL e REST.

GraphQL	DESCANSO
Ele segue uma arquitetura orientada ao cliente.	Ele segue uma arquitetura orientada a servidor.
GraphQL pode ser organizado em termos de um esquema.	REST pode ser organizado em termos de endpoints.
GraphQL é uma comunidade em crescimento.	REST é uma comunidade muito grande.
A velocidade de desenvolvimento no GraphQL é rápida.	A velocidade de desenvolvimento em REST é lenta.
A curva de aprendizado no GraphQL é difícil.	A curva de aprendizado em REST é moderada.
A identidade é separada de como você a busca.	O endpoint que você chama em REST é a identidade de um objeto específico.
No GraphQL, o servidor determina os recursos disponíveis.	A forma e o tamanho do recurso são determinados pelo servidor em REST.
GraphQL oferece alta consistência em todas as plataformas.	É difícil obter consistência em todas as plataformas.

Aplicativos e ferramentas de código aberto usados ​​pelo GraphQL

Os importantes aplicativos e ferramentas de código aberto usados ​​pelo GraphQL são os seguintes:

• gatsby: Gastby é um aplicativo desenvolvido com GraphQL que pode usar dados derivados de mais de uma fonte de API GraphQL. Você pode usá-lo para desenvolver um aplicativo React estático e baseado em cliente.
• GraphiQLGenericName: É um ID que se integra ao navegador e também interage com a API do GraphQL. Algumas das funções que o GraphiQL inclui são mutações, consulta de dados e consultas de preenchimento automático.
• Parque GraphQL: É um IDE poderoso que possui um editor embutido para lidar com mutações, validação, consultas GraphQl, assinaturas, etc. O desenvolvedor pode usar este IDE para visualizar a estrutura do esquema.
• Prisma: Prisma é uma camada de abstração de banco de dados que transforma seus bancos de dados em APIs GraphQL com operações CRUD (Criar, Ler, Atualizar e Excluir).
• Pouco: É uma ferramenta e plataforma de código aberto que converte código reutilizável em componentes. Os desenvolvedores podem usá-los para compartilhar e desenvolver vários projetos.

Resumo

• GraphQL é uma tecnologia de camada de aplicativo do lado do servidor desenvolvida pelo Facebook para executar consultas com dados existentes.
• Você pode usar GraphQL para buscar dados com uma única chamada de API.
• GraphQL ajuda você a melhorar o desempenho do aplicativo móvel.
• Os componentes importantes da consulta GraphQL são: 1) Consulta, 2) Resolvedor, 3) Esquema.
• GraphQL é fortemente tipado. Isso significa que as consultas são executadas no contexto de um sistema específico.
• Cliente GraphQL é um código que faz solicitações POST para um servidor GraphQL relevante.
• Os servidores GraphQL são implementações do lado do servidor da especificação do GraphQL.
• Gateway é um padrão de microsserviço onde você pode construir um serviço separado para lidar com outros serviços de back-end.
• GraphQL tem uma boa maneira de fatorar os valores dinâmicos da consulta.
• Uma mutação é uma forma de alterar o conjunto de dados no GraphQL.
• Os pontos importantes ao projetar o GraphQL são: 1) Nomenclatura, 2) Especificidade, 3) Tipo de carga útil exclusivo do objeto de entrada e 4) Aninhamento.
• GraphQL pode ser organizado em termos de esquema, enquanto REST pode ser organizado em termos de endpoints.
• A desvantagem do GraphQL é que ele carece de recursos na parte de backend.