Curso de GraphQL e Apollo Server com Apollo Client completo

Com o GraphQL e Apollo Server + Apollo Client, você pode criar os servidores de back-end das suas aplicações (mobile ou web), mesmo que já tenha configurado alguma API REST, ou que tenha seus dados diretamente em uma base de dados qualquer. O Apollo Server será usado no back-end e o Apollo Client no front-end.

Caso tenha dúvidas sobre back-end e front-end:

• Back-end é o nosso servidor. Onde salvamos informações em bases de dados, respondemos por requisições, geramos tokens de autenticação para logar o usuário e mais. Geralmente, essa é a parte que o usuário da sua aplicação não vê, mas interage com ela através do front-end. Aqui que mora o Apollo Server.

• Front-end é a parte que o usuário vê e usa para interagir com o nosso back-end. Poderia ser uma aplicação mobile, um site ou até um terminal. Contando que ele consiga enviar requisições para o nosso servidor, então podemos considerar essa aplicação um front-end. Vamos utilizar o React e o Apollo Client para o nosso front-end.

O GraphQL utiliza o conceito de grafos para facilitar a navegação entre os dados da sua aplicação.

O próprio nome "GraphQL", também descreve o que ele é, e faz: Graph, significa grafo (geralmente traduzido como "gráfico" no português, mas é grafo mesmo, da matemática); Q.L. seria para as iniciais de "Query Language" (linguagem de consulta). Juntando tudo Graph Query Language. Traduzindo de forma literal, temos "Linguagem de consulta de grafos".

A função primordial do GraphQL é facilitar a busca de dados, sejam eles simples ou complexos. Aqui ele vai brilhar de formas que você nunca imaginou caso tenha costume com API REST tradicional. Nós conseguiremos solicitar quais campos queremos de cada um dos servidores e receberemos exatamente o que pedimos, nenhum campo a mais ou a menos.

Vamos falar sobre isso no decorrer do curso, no entanto, em se tratando de "linguagem de consulta", ele vai resolver um grande problema que temos nas API RESTs desde sempre: o over-fetching (buscar mais dados do que precisamos, forçando o front-end a consumir mais dados de rede sem necessidade) e/ou under-fetching (buscar menos dados do que precisamos, forçando o front-end a ter que fazer outra solicitação para a API para completar a informação). Como eu disse, nós vamos falar MUITO sobre isso ao longo das aulas.

Além da linguagem de consulta - que é algo parecido com SQL, porém mais robusto - o GraphQL vai te dar a possibilidade de conectar vários serviços ou servidores diferentes na mesma aplicação. Com isso você poderá promover a união de todos os dados de uma (ou várias) empresa(s) em um único end-point como um único objeto final. Já pensou que lindo? Uma requisição; Todos os dados que eu pedi (sem mais, nem menos); Em forma de objeto! Nem precisa, é exatamente isso que o GraphQL promove - E faz com excelência.

Você poderia ter dados no MongoDB, em um arquivo JSON no seu computador, em outro servidor MySQL e uma API REST que havia criado anteriormente. Não importa de onde os dados vão vir, você consegue unir tudo dentro de um único grafo e entregar para o front-end como se eles viessem sempre do mesmo local. Isso não é exagero, nós vamos fazer algo similar neste curso.

Mas e o Apollo-Server (back-end)?

Apesar de falarmos do GraphQL como uma "nova linguagem de programação", NÃO É! Como eu mencionei antes, a única parte de "linguagem" que temos no GraphQL, são partes relacionadas com a consulta. Isso envolve coisas como:

1. A tipagem dos dados da sua aplicação

2. As definições de diretivas e configurações

3. As consultas, que é quando precisamos ler (read) dados dos servidores (famosa Query)

4. As mutações, que é quando precisamos fazer qualquer mudança (create, update, delete)  de dados dos servidores (Mutation)

5. E as subscrições que é onde vamos permitir que usuários abram uma conexão continua com nosso servidor, usando WebSockets, para enviarmos notificações sem que ele tenha que solicitar qualquer informação (Subscriptions).

Essas duas palavras que falei antes (Query e Mutation) formam o nosso "CRUD". Nós podemos criar, ler, atualizar e apagar dados de qualquer um dos nossos servidores. As subscrições são mais voltadas para conexões que não desconectam, como em aplicações de chat online, por exemplo.

A linguagem de consulta do GraphQL vai apenas "descrever" o que devemos fazer, o restante será feito pela linguagem de programação que escolhermos usar.

E por falar nisso, você pode usar GraphQL com várias linguagens de programação diferentes, como: PHP com graphql-php, Scala com Sangria, Python com Graphene, Ruby com o graphql-ruby, JavaScript e TypeScript com uma quantidade enorme de clientes (para front-end) e servidores (para back-end).

Como neste curso vamos usar JavaScript, decidi optar pelo servidor que a comunidade do JS usa mais ultimamente, o Apollo-Server.

Apollo Client (front-end)

Assim como temos um servidor de GraphQL com o Apollo Server, também temos um cliente que vai se conectar com este servidor para troca de informações. O Apollo-Client vive no navegador do usuário da sua aplicação. Ele disponibiliza uma API que nos permitirá interagir com o nosso servidor e também com o navegador do cliente. Podemos salvar dados em cache para prevenir determinadas requisições desnecessárias ao servidor, manipular o estado local e remoto e muito mais. O Apollo Client é bem completo e robusto, fazendo o gerenciamento de praticamente tudo o que seu front-end precisa para funcionar corretamente.

De forma resumida e direta: o GraphQL é a especificação de como algo deve ser feito, o Apollo-Server é a implementação da API usando as linguagens JavaScript ou TypeScript.

Uma coisa que você vai perceber rapidamente, é que as coisas mudam bastante com essas aplicações. Algo que você aprendeu alguns meses atrás, podem mudar para formas diferentes em pouco tempo. Isso é algo que você verá se seguir algum tutorial deste curso, em comparação com vídeos, outros cursos e até as documentações que estão pouco mais antigas.

Neste momento, estamos nas variações da versão v2 do Apollo-Server (não se preocupe que eu tento sempre manter tudo atualizado). Nessa versão, nós não precisamos de outros servidores (como express ou koa, por exemplo). O Apollo-Server permite usar ele mesmo para subir e escutar as requisições HTTP(s) e WebSockets de forma direta. Esse modo é chamado de "Stand-Alone".

Entretanto, você também pode usar o Apollo-Server no modo "middleware" e escolher o seu servidor web do node.js favorito (isso são coisas que vamos conversando ao longo das aulas).

Para o Apollo Cliente, estamos na versão 3 (@apollo/client v3).

Para quem é este curso?

Já existe um texto exatamente como este em algum lugar dessa página, mas aqui eu vou falar mais naturalmente. Eu não tenho intuito de ensinar JavaScript ou TypeScript neste curso. É necessário que você conheça, pelo menos, JavaScript. Tenha em mente que fazer este curso sem o conhecimento necessário será mais frustrante do que recompensador no seu aprendizado.

Existem algumas aulas em modo "preview" neste curso. Isso quer dizer que você poderá assistir a essas aulas em algum local dessa página. Essas aulas estão abertas para que você consiga analisar o instrutor, a tela, o player, o áudio e vídeo e coisas relacionadas. Desse modo, entrar no curso não seria uma "surpresa" para você. Então faça essas aulas abertas antes de iniciar.

Por fim, como instrutor desse curso, me sinto no dever de informar que me considero super detalhista (veja essa descrição rsrs). Eu digo isso porque: você pode amar ou odiar o curso. Ao ponto de ser frustrante pra você.

Em alguns casos adiciono tantos detalhes, ao ponto onde a gente chega a recriar coisas do próprio framework ou lib, apenas para entender melhor como elas funcionam. Fiz isso com DataSources do Apollo-Server e com DataLoaders do Facebook, você verá ao longo do curso.

Se você prefere algo mais rápido e superficial, este não é um curso para você. Se gostar de MUITOS detalhes, vem comigo que a gente vai dar muito certo!!

O que você vai aprender neste curso (seções até o momento)

Abaixo eu vou deixar uma breve descrição de cada seção que já criei (eu mudo isso bastante, mas vou tentar manter tudo atualizado). Além disso, também é possível ver as aulas que estão disponíveis em cada seção em "Conteúdo do curso".

Seção 1: Introdução - Seção introdutória do curso. Vamos conversar sobre o que é GraphQL e os problemas que ele resolve em relação a API RESTs tradicionais.

Seção 2: Configuração do ambiente de desenvolvimento - Nessa seção vamos aprender a configurar o ambiente de desenvolvimento exatamente como o ambiente que uso. Essas configurações são para Linux e Windows, em duas aulas separadas. Obs.: no momento da gravação, eu ainda estava usando Ubuntu 20.04, atualmente uso Kubuntu 21.04 (mas não muda quase nada).

Seção 3: Introdução: GraphQL Queries com Scalar e Object Types no Apollo Server - Nessa seção vamos aprender a configurar o apollo-server e o graphql para trabalhar com scalar types e object types. Essa é a introdução, onde entenderemos o básico do GraphQL. Basicamente, usaremos Queries para ler dados.

Seção 4: Resolvers, Relações, Problema N + 1 e Soluções (como dataloader e datasource) - Nessa seção vamos entender como trabalhar com resolvers, trivial resolvers (resolvers de campo), como criar relações entre tipos e soluções de problemas, como N+1, com dataloaders e datasources.

Seção 5: Mutations e demais operações de CRUD (Create, Update e Delete) - Nessa seção, aprenderemos a utilizar as mutations e as operações de crud no GraphQL. A partir daqui, será possível criar, editar, apagar e ler dados de qualquer servidor GraphQL + Apollo-Server.

Seção 6: JWT: Autenticação e autorização no GraphQL (Sistema de Login) - Nessa seção vamos aprender a criar um sistema de login no GraphQL com JWT. Vamos falar sobre autenticação e autorização com JWT e Bcrypt para maior segurança das informações pessoais dos usuários. Posteriormente, também falaremos de cookies e proteção do JWT Token.

Seção 7: Cookies + JWT: Autenticação e autorização no GraphQL (Sistema de Login) - Nessa seção vamos aprender a proteger o token JWT utilizando cookies seguros, com httpOnly, sameSite e Secure (opções de segurança de cookies http). Também vamos falar sobre cors no express.

Seção 8: GraphQL + Bases de dados (Novo Datasource com MySQL e Knex) - Nessa seção vamos falar sobre o GraphQL com bases de dados. Você pode usar qualquer base de dados que tiver conhecimento, como MongoDB, PostgreSQL e outras, mas vamos usar MySQL. O motivo disso é que vou disponibilizar seções extra, gratuitamente para você.

Seção 9: Subscriptions no GraphQL / Apollo Server (WebSockets) - Nessa seção vamos aprender a criar subscriptions no GraphQL para abrir uma conexão com o cliente usando websockets. Assim, o servidor poderá enviar notificações para usuários conectados.

Seção 10: Deploy da nossa aplicação (vamos ficar online) - Nessa seção nós vamos jogar nossa aplicação no Heroku e vamos criar uma base de dados MySQL utilizando a Clever Cloud, tudo de forma gratuita.

Seção 11: Deploy da nossa aplicação (em um servidor real) - Nessa seção nós vamos jogar nossa aplicação na Google Cloud Platform. Vamos subir e configurar um servidor real, com chaves SSH, SSL, domínio, nginx, base de dados, docker, etc. Essa seção é opcional, porque o deploy da seção anterior já supre todas as nossas necessidades. Porém aqui veremos informações valiosas sobre servidores Linux.

Seção 12: Apollo Client no front-end (@apollo/client v3)- Nessa seção vamos ver como configurar e usar o apollo client. Basicamente veremos como usar o servidor que criamos na seção anterior usando o React e o Apollo Client no front-end.

# EXTRAS

Introdução ao SQL com MySQL - Nessa seção vamos SQL para começar a trabalhar com bases de dados. Vamos utilizar o MySQL para realizar um CRUD completo no BD, incluindo joins (união de dados).

Knex.js - SQL Query Builder para Postgres, MySQL, MariaDB e mais - Nessa seção vamos aprender a utilizar o Knex Query Builder para realizar consultas e CRUD em bases de dados SQL. Vamos usar o MySQL e também vamos fazer joins, inner joins e muito mais.