INTRO GRAPHQL Lucas Viana 17/11/2023

AGENDA 1 2 3 CONTEXTO APLICAÇÃO EXEMPLOS

QUEM SOU EU Me chamo Lucas Viana, mas pode me chamar de Baú! - Caiçara - Aspirante a corredor - Pintor de botões profissional - Estudante de Mandarim

1. CONTEXTO Por que o GraphQL existe? Que problema ele tenta resolver?

MOBILE - Facebook mobile - Fracasso - Renovação

CONCEPÇÃO

No content

CONCEPÇÃO - Nick lança a RFC - Lee e Dan se juntam - GraphQL anunciado

No content

No content

2. APLICAÇÃO Onde o GraphQL se aplica?

- Banco de dados - Framework - Substituição ao REST GraphQL NÃO É:

COMO DEFINIR? De que forma é estruturada uma API GraphQL?

- Dono de uma linguagem própria - Fortemente tipado - Schema-based GraphQL É:

OPERAÇÕES

3. EXEMPLOS Mão na massa!

BIBLIOTECAS

API GITHUB

No content

NOMES NAS OPERAÇÕES Nomeie com nomes únicos suas operações de Query e Mutation do lado do cliente. Usados para cache do lado do cliente, indexação em ferramentas como GraphQL playground, etc. Semelhante a nomear suas funções em JS ao invés de mantê-las anônimas.

VARIÁVEIS Operações podem definir argumentos, muito parecido com uma função na maioria das linguagens de programação. Essas variáveis podem então ser passadas para chamadas de query/mutation dentro da operação como argumentos. Espera-se que as variáveis sejam fornecidas em tempo de execução durante a execução da operação pelo seu cliente.

APOLLO CLIENT

O QUE É APOLLO CLIENT? Encapsula a lógica HTTP usada para interagir com uma API GraphQL. Também serve como uma alternativa para gerenciamento de estado do lado do cliente. Se sua API GraphQL for também um Apollo Server, oferece alguns recursos extras. Proporciona uma abordagem de plug-in para estender suas capacidades. Também é independente de framework.

ARMAZENANDO DADOS DA SUA API ● Todos os nós são armazenados de forma flat por um ID exclusivo ● O ID exclusivo é padronizado como .id ou ._id dos nós. Você pode mudar isso ● Cada nó deve enviar um .id ou ._id, ou nenhum. Ou você tem que personalizar essa lógica

QUERIES REACT

MUTATION REACT

MANTENDO O CACHE ATUALIZADO

PORQUE ESTÁ DESATUALIZADO? Se você realizar uma mutação que atualize ou crie um único nó, o Apollo atualizará seu cache automaticamente, dada a mutação e a consulta terá os mesmos campos e ID. Se você executar uma mutação que atualize um nó em uma lista ou remova um nó, você será responsável por atualizar quaisquer consultas que façam referência a essa lista ou nó. Há muitas maneiras de fazer isso com o Apollo.

MANTENDO ATUALIZADO ● Buscar novamente consultas correspondentes após uma mutação ● Use o método de atualização na mutação ● Consultas de observação

OPTIMISTIC UI

O QUE É OPTIMISTIC UI? Sua UI não espera até depois de uma operação de mutação para se atualizar. Em vez disso, ele antecipa a resposta da API e prossegue como se a chamada da API estivesse sincronizada. A resposta da API substitui a gerada. Isso dá a ilusão de que você está sendo muito rápido.

OPTIMISTIC UI COM MUTATIONS Apollo fornece um hook simples que permite gravar no cache local após uma mutação.

CLIENT SIDE SCHEMAS

PORQUE? Além de gerenciar dados de sua API, o cliente Apollo também pode criar estados locais originados do seu front-end. Coisas que você normalmente armazenaria em algo como Redux ou Vuex. Você pode criar um esquema para definir esse estado, o que permite consultar esse estado da mesma forma que você consulta dados em sua API

COMO? Exatamente da mesma maneira que o servidor. Você apenas precisa estender os tipos do esquema do seu servidor. Em seguida, você usa uma diretiva para acessar o estado local a partir de suas consultas e mutações.

EXEMPLO

SCHEMA

SCHEMA

SCHEMA

SCHEMA