Introdução ao GraphQL

O workshop "Introdução ao GraphQL", oferecido pela Codante.io, é conduzido por Lucas Viana da mim. Ele aborda GraphQL, uma tecnologia desenvolvida no Facebook para integração entre backend e frontend. Os tópicos principais incluem o lado cliente do GraphQL, fundamentos (Query, Mutation, Subscription), Apollo React, Cache, UI Otimista, e Diretivas & Fragmentos. É ideal para quem possui conhecimento básico em JavaScript e React. O curso contém 21 vídeos, totalizando 2 horas e 16 minutos.

Transcript

1. INTRO GRAPHQL Lucas Viana 17/11/2023
2. AGENDA 1 2 3 CONTEXTO APLICAÇÃO EXEMPLOS
3. 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
4. 1. CONTEXTO Por que o GraphQL existe? Que problema ele tenta resolver?
5. MOBILE - Facebook mobile - Fracasso - Renovação
6. CONCEPÇÃO
8. CONCEPÇÃO - Nick lança a RFC - Lee e Dan se juntam - GraphQL anunciado
11. 2. APLICAÇÃO Onde o GraphQL se aplica?
12. - Banco de dados - Framework - Substituição ao REST GraphQL NÃO É:
13. COMO DEFINIR? De que forma é estruturada uma API GraphQL?
14. - Dono de uma linguagem própria - Fortemente tipado - Schema-based GraphQL É:
15. OPERAÇÕES
16. 3. EXEMPLOS Mão na massa!
17. BIBLIOTECAS
18. API GITHUB
20. 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.
21. 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.
22. APOLLO CLIENT
23. 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.
24. 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
25. QUERIES REACT
26. MUTATION REACT
27. MANTENDO O CACHE ATUALIZADO
28. 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.
29. 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
30. OPTIMISTIC UI
31. 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.
32. OPTIMISTIC UI COM MUTATIONS Apollo fornece um hook simples que permite gravar no cache local após uma mutação.
33. CLIENT SIDE SCHEMAS
34. 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
35. 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.
36. EXEMPLO
37. SCHEMA
38. SCHEMA
39. SCHEMA
40. SCHEMA