Um momento
Aula 16
Cursos / GraphQL com Express (Servidor Backend API JSON)
Adicionando Mais Campos (Fields) ao Recurso Produto no GraphQL

Summary

# Resumo da Aula de GraphQL

Na aula, o instrutor adiciona novos campos ao recurso "produto" e ao recurso "companhia" em um esquema GraphQL.

## Adições ao Recurso Produto

1. **Consulta GraphQL**: O instrutor começa com uma consulta para buscar um produto por ID, retornando seu ID e nome. Exemplo: o iPhone, que pertence à Apple.
   
2. **Novos Campos**:
   - **lançado_em**: Adicionado como uma string que representa a data de lançamento (formato: AAAA-MM-DD).
   - **imagem**: Adicionado como uma string, que será a URL da imagem do produto.

3. **Modificação no schema.js**:
   - No arquivo `schema.js`, os campos `lançado_em` e `imagem` são adicionados ao tipo de produto, utilizando o tipo `GraphQLString`.

4. **Atualização do banco de dados**:
   - As informações de `lançado_em` e `imagem` são adicionadas a cada produto na lista que retorna da API (arquivo `api/index.js`).
   - Por exemplo:
     - iPhone: "2007-06-29"
     - iPad: "2010-04-03"
     - Pixel: "2013-02-21"
     - Surface: "2012-10-26"
     - Xbox: "2001-11-15"
   - URLs das imagens são coletadas de fontes como Wikipedia e Wikimedia.

## Teste das Mudanças

Depois de adicionar os novos campos, o instrutor verifica no GraphQL se as informações de `lançado_em` e `imagem` estão aparecendo corretamente ao fazer consultas pelos IDs dos produtos.

## Vantagens do GraphQL

O instrutor destaca que uma das principais vantagens do GraphQL é seu recurso de solicitar apenas os dados necessários. Isso ajuda a:
- Reduzir o uso de banda, especialmente útil para usuários em dispositivos móveis com conexões lentas.
- Melhorar a eficiência das chamadas a APIs, evitando o envio de dados desnecessários.

A aula termina com a ênfase na utilidade do GraphQL para pedidos de dados mais precisos e eficientes.

---
**Próximos passos**: Os alunos são incentivados a praticar a adição de campos e testar as consultas por conta própria antes da próxima aula.

Video Transcript

Estamos de volta, vamos continuar nesta aula, vamos só adicionar mais campos adicionais ao recurso companhia e ao recurso produto. Começando aqui com o produto, eu tenho essa query no GraphQL, que ficou aqui, por um produto, buscar o produto por id e retorne, por favor, o id e o nome, neste caso retorne o iPhone, acompanha a Apple. Então vamos adicionar os seguintes campos. Primeiro, uma data de lançamento, campo para data de lançamento que eu vou chamar de lançado em e outro campo, uma URL da imagem do produto que eu vou chamar de imagem. Lançado em vai ter o formato de ano, prazo, mês, prazo, dia, mas a gente não precisa preocupar se for data ou não, isso aqui é só uma string, então você faz lançado em com formato string. Mesma coisa para imagem, formato string, com HTTP e assim por diante. Então, quero ver você adicionar esses dois campos, as duas fields, né, ao recurso produto lá no arquivo schema.js, para os vídeos tenta fazer por si próprio e depois a gente continua juntos. Vamos lá então, voltando ao editor de texto, no arquivo schema.js temos o esquema aqui para o produto type, já temos as fields, né, os campos de id, de nome, companhia id e a relacionamento com a companhia também, depois de nome vamos adicionar lançado em, lançado em, o tipo desse campo será graph, que é o string, é uma data mais é só uma string, o outro campo é para URL da imagem, é só adicionar imagem, um objeto, type, graph, que é o string, também é uma string. Com isso a gente salva o arquivo, mas se você der a query de novo ele vai pegar no, porque o nosso banco de dados simulado ainda não tem definido essas propriedades para cada recorde do produto. Então, vamos fazer isso agora, se lembra que o produto vem do arquivo api, barraindex.js, temos essa lista aqui, produtos e vai ser retornada pelos nossos métodos aqui da api. Então, a cada objeto aqui eu vou adicionar o campo lançado em e imagem. Vamos começar com lançado em, então eu vou selecionar tudo de uma vez aqui, vou começar aqui, vou dar uma virgula e vou adicionar lançado em, vou adicionar duas aspas e agora vou digitar para cada uma data de lançamento do produto e já preciso ir aqui primeiro para o iPhone, 2007 traço 6 traço 29, 2007 traço 06 traço 29, o iPad, 2010 traço 04 traço 03, o Pixel, 2013 traço 02 traço 21, o Surface da Microsoft, 2012 traço 10 traço 26, eu peguei essas datas da Wikipedia, espero que estejam certas, embora que é só, se você não quiser perder tempo com isso pode colocar a data, Xbox 2001 traço 11 traço 15. Tá bom? Agora vamos fazer para imagem. Vou fazer a mesma coisa relacionar esse, esse e esse, virgula, imagem, duas aspas individuais, agora para o produto eu peguei, tenho aqui um arquivo que eu peguei o link ao RL de cada imagem do produto que eu achei na Wikipad, na Wikimedia, essa é a fonte dessas imagens, você pode usar qualquer imagem que você quiser também, é só para a gente ter alguma coisa lá na propriedade, vou começar aqui com o iPad, vou copiar, colar aqui o iPad, o iPhone, fazer um pulo, copiar o Surface, o Pixel, e, finalmente, o Pixel, o Xbox, o VD5, tá, então é isso, adicionamos a propriedade lançada, propriedade imagem a cada produto aqui. Então vamos tentar novamente no graphical, ver se dá alguma coisa, apareceu para o produto de D1 lançado em, e a imagem, vamos tentar ID2, o iPad, ID3, Pixel, ID4, Surface, ID5, Xbox, certo? Vamos a gente aprender o GraphQL você pode pedir exatamente os dados que você quer, se você não precisar do nome do produto é só remover e ele não manda mais o nome, se você não precisar mais do dado do lançamento é só remover e ele não manda mais, e assim por diante, só escolher os campos que você quer, receber no front end, tá, isso ajuda muito especialmente os usuários que estão no dispositivos móveis com a internet, com conexão que é bem devagar em comparação a sua internet de caso, então eles não precisam receber, se ele recebeu muita informação vai demorar um pouquinho para receber resposta do servidor e se tiver algum meio que é o GraphQL de mandar menos informações, manda as informações necessárias porque em muitos casos as APIs mandam muita informação e você acaba nem usando todas as propriedades que são enviadas pela resposta, então o GraphQL você pede exatamente o que você vai precisar para mostrar no front end, então é só selecionar os campos necessários e ele só vai mandar aquilo, você vai ter desperdício da banda, da conexão, o usuário também pode ter conexão limitada com limite de dados, então tem vários fatores, aumenta a velocidade e deixa tudo bem melhor, tá, então por essa aula é só e até a próxima.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: