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

O que é GraphQL?

GraphQL GraphQL é uma tecnologia de camada de aplicação do lado do servidor, desenvolvida pelo Facebook (agora Meta), para executar consultas com dados existentes. Foi lançada publicamente em 2015 e é regida pelo GraphQL. Foundation Desde 2018, o GraphQL otimiza chamadas de API RESTful. Ele oferece uma maneira declarativa de buscar e atualizar seus dados, permitindo que você carregue dados do servidor para o cliente e que os programadores escolham os tipos de requisições que desejam fazer.

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.

Por que usar GraphQL?

A seguir estão os motivos para usar GraphQL:

• Ele fornece uma consulta legível por humanos.
• Em 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 sobrecarga ou falta de recursos.
• 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.
• Pode ser usado para prototipagem rápida de aplicações.ping.

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çãotracaplicação a uma API existente para especificar a estrutura de resposta com base nas necessidades do usuário.

Todos esses benefícios dependem de três elementos móveis que funcionam em conjunto.

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, um exemplo de um campo em uma consulta GraphQL.

query {
    team {
        id
        name
    }
}

O servidor responde com um documento JSON cujo formato reflete a consulta:

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

No exemplo de GraphQL acima, solicitamos ao servidor o campo chamado `team` e seus subcampos, como `id` e `name`. O servidor GraphQL retorna exatamente os dados que solicitamos.

2. Argumentos

In DESCANSO, só podemos passar um único conjunto de argumentos como URL segmentos 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.

Este 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

Servidores GraphQL são implementações do lado do servidor da especificação GraphQL. Eles representam seus dados como uma API GraphQL, que seu programa cliente pode consultar para obter as informações necessárias. 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 backend. Ele oferece documentação funcional e proporciona uma maneira conveniente de coletar dados de mais de uma fonte com uma única requisição.

GraphQL oferece uma boa maneira de separar os valores dinâmicos da consulta, passando-os como um dicionário à parte. Esses valores são conhecidos como variáveis. Sempre que trabalhamos com variáveis, precisamos fazer o seguinte:

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.

Eis como fica tudo junto. Primeiro, a consulta, que declara a variável:

query HeroNameAndFriends($episode: Episode) {
    hero(episode: $episode) {
        name
        friends {
            name
        }
    }
}

Em seguida, o dicionário separado com os valores das variáveis ​​é enviado juntamente com ele:

{
    "episode": "JEDI"
}

E a resposta retornada pelo servidor:

{
    "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.

Consultas de leitura e mutações de escrita. Um terceiro tipo de operação abrange dados que são alterados enquanto o cliente ainda está conectado.

O que é uma Subscrição em GraphQL?

A tudo incluso é o terceiro tipo de operação na especificação GraphQL, juntamente com query e mutation. Uma query e uma mutation são concluídas em uma única requisição e resposta. Uma subscription, por sua vez, mantém uma conexão de longa duração aberta, geralmente via WebSockets, de modo que o servidor envia um novo resultado ao cliente sempre que um evento específico ocorre.

A sintaxe espelha uma consulta, com a palavra-chave `subscription` substituindo `query`:

subscription OnCommentAdded($postId: ID!) {
    commentAdded(postId: $postId) {
        id
        content
        author {
            name
        }
    }
}

Na prática, três pontos distinguem as assinaturas.

• Orientado a eventos, não a pesquisas: O cliente manifesta interesse uma única vez. Nada mais é enviado até que o servidor publique um evento correspondente, o que é muito mais econômico do que consultas repetidas.
• Um campo raiz por assinatura: A especificação permite apenas um único campo de nível superior, ao contrário de uma consulta que pode solicitar vários de uma só vez.
• Melhor mantido pequeno: Envie apenas os campos que a interface precisa atualizar. Chat ao vivo, notificações e cotações são os usos típicos.

Diferença entre GraphQL e REST

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

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:

• gatsbyGatsby é uma aplicação baseada em GraphQL que pode usar dados provenientes de mais de uma fonte de API GraphQL. Você pode usá-la para desenvolver uma aplicação React estática e uma aplicação voltada para o cliente.
• GraphiQLGenericName: É uma IDE 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, consultas de dados e autocompletar consultas.
• Parque GraphQL: É uma IDE poderosa que possui um editor integrado para lidar com mutações, validação, consultas GraphQL, assinaturas, etc. O desenvolvedor pode usar essa IDE para visualizar a estrutura do esquema. O projeto foi descontinuado e seus recursos foram incorporados ao GraphiQL.
• Prisma: Prisma é um banco de dados absolutotraccamada de ção, agora fornecida como um ORM com tipagem estática, que é amplamente utilizada em conjunto com um servidor GraphQL para expor 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.

Perguntas Frequentes