Desbravando GraphQL e Apollo Client
Sumário
- O que é e para que serve GraphQL
- Quando usar GraphQL
- O que é query, mutation e type no GraphQL
- Vantagens e desvantagens do GraphQL
- O que é e para que serve Apollo Client
- Configurando Apollo Client no React/Next
- Integrando queries com Apollo Client no React/Next
- Configurando Apollo Client no Vue
- Integrando queries com Apollo Client no Vue
- Dúvidas? Perguntas?
O que é GraphQL
Linguagem de query e ambiente de execução para APIs
Ajuda na consulta dos seus dados
Fornece uma descrição completa dos dados da sua API
Dá ao cliente o poder de pedir exatamente o que precisa e nada mais
Habilita ferramentas poderosas às pessoas desenvolvedoras.
Breve histórico
Criado em 2012 (Facebook) e ficou opensource em 2015
Necessidade de uma API de busca de dados poderosa o suficiente para contemplar todas as pesquisas do Facebook no alicativo
Simples o suficiente para uso de novos desenvolvedores
Com GraphQL podemos
Criar APIs robustas de fácil manutenção e escalabilidade.
Utilizar qualquer banco de dados (SQL e noSQL) e qualquer linguagem de programação.
Gerar uma documentação completa com base nos types, queries e mutations criados.
Migrar uma API REST aos poucos para
uma API GraphQL.
Com GraphQL podemos
Consumir outras APIs - REST ou GraphQL - sem dificuldades.
Retornar campos computados nas consultas.
Dar ao front mais liberdade na consulta dos dados.
Fazer tipagem de dados.
Quando usar GraphQL
Necessidade de rápido processamento de dados.
Possui alta taxa de transferência de dados.
Precisa recuperar informações de diversos bancos de dados ou diferentes stacks.
Ideal para - mas não se limita a - aplicações com as seguintes características:
Necessidade de rápido processamento de dados.
Quando usar GraphQL
Faz integração com serviços de terceiros.
Será implementada em diversas plataformas (app, web) e cada uma consome os dados de maneira diferente.
Precisa de respostas rápidas, mesmo em conexões
mais lentas (ex: 3G/4G).
Ideal para - mas não se limita a - aplicações com as seguintes características:
Algumas nomenclaturas
É o cerne do GraphQL!
Descreve todas as funcionalidades que teremos em nossa API
É como um contrato para os cliente
que consomem a API
Schema
O Schema é tudo!!!
Algumas nomenclaturas
TUDO no GraphQL é ou possui um type!
Os types serão grande parte do nossa Schema
Representam objetos de dados complexos que
possuem campos e seus tipos
Type
Esses objetos representam entidades na
nossa API GraphQL
Algumas nomenclaturas
Tipos padrões (Int, String, Boolean etc)
Tipos específicos (ID, Enum, Interface, Input etc)
Tipos super específicos!
Type - quais são?
Vamos falar sobre os tipos super específicos
no próximo slide!
Algumas nomenclaturas
Type - tipos específicos
type Serie {
id: ID
nome: String
personagens: [Personagem]
}
type Personagem {
id: ID
idade: Int
series: [Serie]
}
Algumas nomenclaturas
Types utilizados para fazer qualquer ação que não seja consulta na API (CrUD)
Mutation
mutation {
criarSerie(serie: SerieInput): Serie
}Algumas nomenclaturas
Types utilizados para fazer qualquer ação de consulta na API (cRud)
Query
query {
buscarSerie(nome: String): Serie
}Vantagens e desvantagens
Data Fetching
Documentação
Schema e sistema de tipos
Vantagens
Após os slides vamos ver exemplos disso ;)
Vantagens e desvantagens
404 not found
Desvantagens
Vantagens e desvantagens
Curva de aprendizagem lenta no começo
Grande potencial para consultas lentas
Incompatibilidade com cache na web*
Desvantagens
* Apollo Client ajuda nisso
Tecnologia muito recente
Apollo Client
Biblioteca de gerenciamento de estado abrangente para Javascript que permite gerenciar dados locais e remotos com GraphQL
Nos ajuda a organizar os Schemas, gerenciar e executar as queries e mutations do GraphQL
A seguir vamos mostrar dois projetos (Vue e React/Next)
com Apollo Client
Referências
Nosso artigo - ainda em andamento
Referências
Referências
Referências
Dúvidas?
Obrigade!
Pedro & Helen <3
Nos siga nas redes sociais!