Aula 16
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: