GraphQL é uma linguagem de consulta e tempo de execução para APIs. Ele permite que os clientes especifiquem consultas e os servidores validem os dados em um esquema fortemente tipado.
Ao contrário das APIs REST, GraphQL usa um único ponto de extremidade para todas as operações. Os servidores baseados em GraphQL só podem se comunicar por meio de consultas GraphQL. Para projetos simples, é viável usar um cliente REST, como Axios ou fetch
, para enviar consultas GraphQL. No entanto, para projetos maiores e mais complexos com requisitos avançados, é necessário um cliente GraphQL.
Os clientes GraphQL tornam a comunicação mais fácil abstraindo pequenos detalhes e implementando recursos adicionais, alguns dos quais incluem armazenamento em cache, processamento em lote de consultas e desduplicação e tipagem estática dos resultados da consulta GraphQL.
Neste guia, compararemos os cinco clientes GraphQL a seguir e avaliaremos cada um em termos de funcionalidade, suporte da comunidade e tamanho.
Vamos começar!
graphql-request
graphql-request
é um cliente GraphQL mínimo. A biblioteca é isomórfica, o que significa que suporta Node.js e navegadores. Ele vem com suporte TypeScript de primeira classe, para que as tipificações nunca fiquem desatualizadas. A biblioteca pesa apenas 5,2 kB .
Atividade
A atividade do repositório graphql-request
GitHub está saudável com 3,7 milhões de estrelas. Em npm , O graphql-request
é baixado mais de 1,3 milhão de vezes por semana, então você não deve ter problemas para encontrar ajuda online!
Prós
graphql-request
é simples de usar e quase não há curva de aprendizado:
import {GraphQLClient, gql} de'graphql-request' const query=gql` { hero { nome } } ` const client=new GraphQLClient ('& amp; lt; graphql-endpoint & amp; gt;') const data=await client.request (query)
- Funciona tanto no servidor quanto no cliente
- Suporte para TypeScript
- Muito leve
- Forte suporte da comunidade
Contras
- Sem suporte para recursos avançados, como cache de consulta e desduplicação
- Sem suporte para assinaturas GraphQL
Cliente Apollo
Apollo Client é um cliente GraphQL avançado apenas para front-ends. Inclui recursos para armazenamento em cache, lote de consulta, desduplicação de consulta e paginação. Ele também pode ser usado para gerenciar o estado local no lugar de uma loja Redux. A biblioteca base pesa cerca de 33,9 kB .
Apollo Client é escrito em TypeScript, portanto, o suporte TypeScript é excelente. Ele tem integrações para estruturas e bibliotecas populares como React, Next.js, Angular e Vue.js. O Apollo Client também tem uma extensão do Chrome para inspeção e fazendo consultas.
Atividade
O cliente Apollo é atualizado pelo menos uma vez por mês. É baixado mais de um milhão de vezes por semana em npm e tem mais de 16k estrelas e 2k garfos em GitHub .
Prós
- Robusto e abrangente
- Atende à maioria dos casos de uso
- Suporte para TypeScript
- Integrações para bibliotecas e estruturas de IU populares
- Integrações para iOS e Android
- Extensão do Chrome para inspecionar consultas
Além da atividade no npm e no GitHub, o Apollo Client conta com suporte online na forma de um fórum da comunidade dedicado. Ele também tem apoio comercial da Apollo GraphQL Inc.
Contras
- Curva de aprendizado íngreme para recursos avançados, como lote de consultas, consultas persistentes e armazenamento em cache
urql
urql pretende ser fácil de usar e extensível por meio de mecanismos de cache integrados com padrões razoáveis. urql tem clientes para Preact, React e Svelte, além de uma biblioteca central para uso com Node.js no lado do servidor.
O tamanho do pacote do urql é muito pequeno, pesando apenas 7,1 kB . É uma das poucas bibliotecas GraphQL com suporte offline integrado.
Atividade
A biblioteca urql é baixada pelo menos 95 mil vezes por semana em npm . No GitHub , o urql recebeu mais de 6 mil estrelas.
Prós
urql é robusto, mas ainda é fácil de usar para funcionalidades básicas:
const QUERY=` teste de consulta ($ id: ID!) { getUser (id: $ id) { eu ia nome } } `; const result=client.readQuery (QUERY, {id:'test'});
- Documentação clara e legível
- Suporte para texto datilografado
- Integrações para muitas bibliotecas e estruturas de IU populares
- Extensão do navegador para inspecionar consultas
- Suporte offline integrado
- Pacote pequeno
Contras
- Sem suporte para Angular
- Sem suporte para lote de consultas
- Sem suporte de paginação integrado
- Comunidade pequena em comparação com outros clientes GraphQL
Relé
Relay é um cliente GraphQL de alto desempenho e escalonável desenvolvido pelo Facebook.
Como você pode imaginar, o Relay foi construído com o React em mente. Como tal, é necessária uma abordagem baseada em componentes para a busca de dados. O relay é altamente opinativo e deve ser usado estritamente com interfaces do React. O relé tem um tamanho de pacote de 47,1 kB.
Atividade
O relay é baixado pelo menos 94k vezes por semana em npm . O Relay recebeu mais de 15 mil estrelas e mais de 1,5 mil forks no GitHub .
Prós
- Recursos avançados para armazenamento em cache, deduplicação de consulta, paginação e gerenciamento de estado local
- Totalmente integrado com React, dando-lhe componentes e ganchos de ordem superior
- Usado por grandes empresas como Facebook e Quora
Contras
- Suporta apenas React
- Muito opinativo por causa de suas convenções rígidas
- Curva de aprendizado mais íngreme em comparação com outros clientes
- A documentação é difícil de analisar
- O cliente de retransmissão só pode se comunicar com um servidor GraphQL Relay compatível
Ao aplicar uma convenção rígida, o Relay oferece menos espaço para erros, que podem ser positivos e negativos.
graphql-hooks
graphql-hooks
é um cliente GraphQL muito pequeno para React. Apesar de seu tamanho minúsculo, graphql-hooks
oferece suporte de primeira classe para cache, paginação, autenticação, uploads de arquivo e renderização do lado do servidor. O tamanho do pacote pesa apenas 3,6 kB .
O cliente fornece os ganchos useQuery
, useMutation
e useSubscription
React para lidar com consultas, mutações e assinaturas, respectivamente. A documentação oficial inclui um guia para migrar do Apollo Client .
Atividade
graphql-hooks
é baixado 6k vezes por mês em npm . Tem 1,5 mil estrelas no GitHub .
Prós
- Suporte para TypeScript
- Suporte para recursos avançados como cache, paginação e SSR pronto para uso
- Tamanho muito pequeno
- API tem uma pequena área de superfície
Contras
- Suporta apenas React
- Pequena comunidade
Escolha do cliente GraphQL certo para seu projeto
A tabela abaixo resume as informações discutidas acima.
C comunidade suporte |
Aprendizagem curva |
Tamanho | Texto datilografado tipificações | Paginação, cache de consulta, lote e desduplicação |
Suporte isomórfico | Integrações com bibliotecas e estruturas de IU | |
---|---|---|---|---|---|---|---|
graphql-request |
Ótimo | Baixo | 5,2 kB | Sim | Não | Sim | Não |
Cliente Apollo | Ótimo | Médio | 33,9 kB | Sim | Sim | Apenas cliente | React, Next .js, Angular, Svelte, Ember, componentes da web, e Vue |
urql | Razoável | Baixo | 7,1 kB | Sim | Lote não suportado | Sim | React, Svelte, e Vue |
Relé | Razoável | Alto | 47,1 kB | Não | Sim | Apenas cliente | Reagir apenas |
graphql-hooks |
Baixo | Baixo | 3,6 kB | Sim | Lote e desduplicação não suportados | Apenas clientes | Reagir apenas |
A escolha do melhor cliente para o seu projeto dependerá muito de seus objetivos e necessidades individuais. Você pode, no entanto, usar as diretrizes listadas abaixo como ponto de partida:
-
graphql-request
: projeto do lado do servidor ou front-end com requisitos simples - Cliente Apollo: projeto de front-end avançado
- urql: recursos avançados, como cache que executa o lado do servidor
- Relay: o projeto é baseado em React, requer recursos avançados e inclui muitos componentes
-
graphql-hooks
: o projeto é baseado em React e não requer recursos avançados
Conclusão
Os clientes GraphQL tornam a interface com APIs GraphQL muito mais fácil do que chamá-los diretamente.
Cada cliente GraphQL tem seus prós e contras. A escolha de um cliente que ofereça os melhores recursos para o seu caso de uso é fundamental para uma experiência de desenvolvimento tranquila. A seleção do cliente ideal dependerá do seu projeto exclusivo e nem sempre pode haver uma resposta óbvia. Esperançosamente, as informações neste artigo irão ajudá-lo a começar!
Espero que tenha gostado deste artigo! Se você gostou da minha escrita e quer ler mais, siga-me no Médio .
A postagem 5 clientes GraphQL para JavaScript e Node.js apareceu primeiro no LogRocket Blog .