GraphQL sem Apollo, Relay ou mesmo o Axios

- Introdução sobre o GraphQL;
- GraphQL como alternativa as APIs REST;
- Como consumir uma API GraphQL grafos no front-end (sem bibliotecas)?
- Como melhorar o ambiente para ter realce de sintaxe e intellisense?

Links e referências
==============

- Um artigo que escrevi sobre o mesmo tema.
https://medium.com/@vitorluizc/consumindo-apis-graphql-sem-apollo-relay-ou-mesmo-o-axios-b914e88ffa8c

- Documentação oficial do GraphQL
https://graphql.org/learn/

- GraphQL Foundation (criada e mantida pela Linux Foundation)
https://gql.foundation/

Transcript

1. GraphQL sem Apollo, Relay ou mesmo o Axios É possível?
2. Vitor Luiz Cavalcanti @VitorLuizC no GitHub, Twitter, Medium, LinkedIn* e Facebook
3. Por que GraphQL?
4. O GraphQL resolve os 3 principais problemas das APIs RESTful 1 - under-fetching 2 - over-fetching 3 - request waterfall
5. Uma linguagem de consumo de grafos (?)
6. - N grafos em uma única requisição - A relação entre os grafos é intuitiva e absurdamente simples - Sintaxe muito próxima ao JSON e que visualmente define os dados e o formato que vou recebê-los - É possível usar variáveis composição das queries
7. As 3* operações do GraphQL 1. Queries: A forma como buscamos dados do servidor, em um paralelo com APIs REST ele é o GET 2. Mutations: A forma como modificamos e recebemos a atualização dos dados do servidor. Criar, alterar e excluir são feitos com mutations e não tem como traçar um paralelo com APIs REST 3. Subscriptions: A forma como mantemos uma conexão em tempo real com o servidor. É como escutar as mutations de outros usuários em tempo real
8. Como consumir usando GraphQL?
9. Requisições com GraphQL - O back-end expõe uma única rota para receber sua query GraphQL e as variáveis - Uma requisição POST é o suficiente para comunicar os dados - Servidores com GraphQL recebem e respondem usando JSON
10. Fetch API
11. Requisições no mundo real - Temos que lidar com cabeçalhos customizados para autenticação - Automatizar o tratamento de erros - Automatizar a troca de ambientes - Automatizar o tratamento das respostas e requisições
12. Fetch + Interceptors
13. Abstrato → Abstraído
14. Exemplo de uso da função request
15. Como melhorar a experiência?
16. Usando realce de sintaxe no VSCode - É possível obter realce de sintaxe no VSCode em arquivos *.graphql e *.gql ou usando o comentário /* GraphQL */ antes de uma template string.
17. Usando inferência e checagem de código no VSCode
18. Usando inferência e checagem de código no VSCode
19. Fazendo o setup e configurações do GraphQL for VSCode - A biblioteca watchman para o SO $ brew install watchman - O módulo @playlyfe/gql interpreta e valida o código GraphQL $ yarn add @playlyfe/gql -D - O arquivo .gqlconfig define as configurações de validação
20. Configurações de validação do GraphQL - Schema e seus arquivos - Configurações específicas para os arquivos - EmbeddedQueryParser vs QueryParser na interpretação e validação dos arquivos
21. O arquivo Schema.graphql - Introspecção dos tipos, grafos e operações que o servidor com GraphQL suporta - O módulo graphql-cli faz isso pra você com o comando get-schema $ npx graphql-cli get-schema
22. Dúvidas ?