React: executando consultas dinâmicas com Apollo Client

Conheça o Playground e o GraphQL - Apresentação

Boas-vindas a mais um curso de React, agora com GraphQL!

Meu nome é Thamiris Adriano, sou instrutora aqui na Alura e coordenadora no curso de front-end na FIAP.

Audiodescrição: Thamiris se declara uma mulher branca, possui cabelo cacheado e castanhos. Veste uma camiseta preta escrito "Postech", da FIAP e Alura. Ao fundo, o estúdio da Alura com iluminação azul e roxa. À direita, uma estante com decorações e um letreiro neon do logotipo da Alura.

Vamos conferir nosso projeto?

Entendendo o projeto

link acessado pela instrutora para exibir o projeto:

localhost:5173/criar

Atualmente, o projeto está utilizando dados mockados. Isso significa que as informações estão diretamente inseridas no Feed. Uma das primeiras etapas do curso será conectar esse projeto a uma API externa. Utilizaremos um projeto fictício que já criamos, que é um server com dados fictícios.

Ao conectar nosso projeto front-End a esse server, conseguiremos publicar novas informações.

Do lado superior esquerdo temos o componente de botão "Publicar", vamos adicionar novos campos para tornar o projeto mais robusto, com mais dados para explorar.

O que vamos aprender?

Vamos focar bastante na performance da aplicação, discutindo aspectos como cache e como invalidá-lo, além de sempre considerar a experiência da pessoa usuária, garantindo que erros sejam claros e compreensíveis.

Se houver algum erro, nosso sistema mostrará o problema e a razão pela qual os dados da atividade não estão sendo publicados, por exemplo.

Pré-requisitos

Para começar o curso e acompanhá-lo adequadamente, é útil ter alguma noção de React, especialmente para entender o uso dos hooks. Mostraremos como rodar o projeto desde a instalação, incluindo o npm install. No entanto, ter um conhecimento prévio de React facilitará o acompanhamento e a compreensão dos próximos passos.

Nos vemos na próxima aula!

Conheça o Playground e o GraphQL - Queries e consultas via Playground

Exploraremos o Playground do Apollo e identificaremos onde realizar as queries e mutations.

Iniciando o Projeto

Com o VS Code aberto e o projeto teste, começamos a explorar as primeiras queries e mutations. Executamos o comando node index.js no terminal integrado na parte inferior.

node index.js

Como retorno, obtemos:

Server ready at: http://localhost:4000/graphql

Esse comando abre uma porta no localhost:4000. Clicamos neste endereço, e o Chrome será aberto no ambiente do Playground do Apollo.

Acessando o Ambiente do Playground

No centro, está a "operation", onde realizamos as queries e mutations.

query {
  elementos {
    id
    nome
    massaAtomica
    numeroAtomico
  }
}

No canto superior direito, encontramos o botão "Run", usado para executar. Do lado direito do "Run", temos a "Response", e no canto esquerdo, estão as queries disponíveis para execução.

Temos os dados da aplicação mockados no projeto, incluindo elementos químicos com informações como ID, nome, massa atômica, número atômico, entre outras.

Verificando a resposta

Executamos clicando em "Run" para verificar a resposta.

{
  "data": {
    "elementos": [
      {
        "id": "1",
        "nome": "Hidrogênio",
        "massaAtomica": 1.008,
        "numeroAtomico": 1
      },
      {
        "id": "2",
        "nome": "Hélio",
        "massaAtomica": 4.002602,
        "numeroAtomico": 2
      },
      {
        "id": "3",
        "nome": "Lítio",
        "massaAtomica": 6.94,
        "numeroAtomico": 3
      },
      {
        "id": "4",
        "nome": "Berílio",
        "massaAtomica": 9.012182,
        "numeroAtomico": 4
      },

// json omitido

Ao fazer isso, visualizamos a resposta com todos os elementos químicos presentes no projeto. Esses dados ainda estão mockados e não são acessados via API, o que é uma das grandes vantagens do GraphQL que usaremos para acessar APIs. Neste estágio inicial, utilizamos os dados mockados.

Solicitação de dados específicos

A grande vantagem é que podemos solicitar à API falsa apenas os dados necessários. Embora todos os dados estejam disponíveis, é possível pedir, por exemplo, apenas o id e o nome, e receber essas informações específicas.

query {
  elementos {
    id
    nome
  }
}

Também é possível solicitar apenas o nome e obter somente essa informação. Isso é interessante porque o front-end pode requisitar exatamente o que precisa, evitando a necessidade de fazer várias solicitações ao back-end para diferentes endpoints.

Resolvendo problemas com GraphQL

A vantagem do GraphQL é interessante porque, ao trabalhar com requisições de API usando GraphQL, evitamos dois problemas comuns.

Overfitting

Um deles é o overfitting ("sobreajuste"), que ocorre quando recebemos mais dados do que precisamos, sobrecarregando a API.

Underfitting

O outro é o underfitting ("adaptação insuficiente"), que acontece quando recebemos menos dados e precisamos fazer mais requisições, o que também não é ideal. Portanto, o GraphQL foi desenvolvido para resolver esses problemas.

Metáfora para entendimento

Podemos usar uma metáfora: é como se estivéssemos em um restaurante e pedíssemos exatamente o que precisamos à pessoa atendente, e não solicitar um item do cardápio e receber quase todas as opções disponíveis. Em uma requisição, por exemplo, de cliente, estamos lidando com dados falsos e limitados.

Impacto em projetos grandes

Em projetos grandes, com muitos dados, podemos desejar apenas algumas informações dos clientes, como nome e e-mail. Se fizermos uma query e a API retornar uma grande quantidade de dados, incluindo endereço, número de telefone e CPF, isso se torna um problema, pois podemos receber informações que não precisamos. O GraphQL foi criado para resolver essa questão.

Conclusão e Próximos passos

Agora que entendemos como o GraphQL funciona, para que serve e como melhorar nossa vida, vamos explorar como integrá-lo ao nosso projeto de front-end, especificamente um projeto de React que veremos em breve. Até logo.

Conheça o Playground e o GraphQL - Variáveis

Ainda usando o mesmo projeto.

Utilizamos valores fixos para obter os parâmetros necessários da nossa API fictícia até o momento. Isso significa que, se desejarmos obter o nome da pessoa usuária, por exemplo, especificamos o nome diretamente na consulta.

No entanto, quando a consulta estiver no código e for necessário fazer alterações, será preciso modificar o código inteiro, o que não é prático. Para resolver esse problema, usamos variáveis.

Uso de variáveis

As variáveis capturam alguns desses valores e os tornam genéricos, permitindo a obtenção de valores diferentes usando a mesma variável.

Configuração das variáveis

Abaixo da operation, temos a seção de variáveis ("Variables"). Nela, inserimos a variável necessária. Neste caso, criamos a variável elementosID com o seguinte código:

{
 "elementosID": "3"
}

E alteramos a consulta para acessar essa variável id. Para fazer isso, modificamos e inserimos, após a palavra query, um cifrão seguido de elementosID, especificando que isso representa a variável.

query ($elementosID: ID!) {
  elemento(id: $elementosID) {
    nome
    numeroAtomico
  }
}

Assim, toda vez que alteramos o número do elemento em "Variables", a consulta retorna um elemento diferente. Clicamos no botão "Run" e obtemos:

{
  "data": {
    "elemento": {
      "nome": "Lítio",
      "numeroAtomico": 3
    }
  }
}

Nesse caso, estamos obtendo o lítio dentre todos os outros elementos.

Alteração do valor da variável

Agora, desejamos alterar para o elementoID com** valor 8**, a consulta retornará apenas o elemento 8:

{
 "elementosID": "8"
}

{
  "data": {
    "elemento": {
      "nome": "Oxigênio",
      "numeroAtomico": 8
    }
  }
}

Obtemos como retorno o oxigênio, que representa o elementoID com valor 8.

Benefícios das variáveis no GraphQL

Isso é útil porque é mais uma maneira do GraphQL fornecer apenas as informações necessárias. Utilizamos as variáveis não apenas para manter o código mais limpo e evitar a necessidade de alterar o código inteiro quando fazemos uma mudança, mas também para melhorar a flexibilidade das consultas.

Com essa pequena alteração, a consulta se torna mais flexível, permitindo alterar os parâmetros apenas modificando o JSON. Isso simplifica e facilita a visualização.

Cuidados com a palavra "query": Em algumas consultas, quando estamos buscando informações, a palavra "query" não é necessária. Podemos trazer esse código apenas quando estamos fazendo uma consulta. No entanto, ao trabalhar com variáveis, é preciso especificar que há uma query.

Até mais!

Sobre o curso React: executando consultas dinâmicas com Apollo Client

O curso React: executando consultas dinâmicas com Apollo Client possui 76 minutos de vídeos, em um total de 45 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Conheça o Playground e o GraphQL
• Configuração básica e instalação do Apollo Cliente
• Realizando queries com Apollo Client
• Mutations com Apollo Client
• Gerenciamento de cache avançado