React: obtendo dados com React Query

Evoluindo o Alura Books - Apresentação

Estou mega feliz que você resolveu iniciar este curso, vamos dar uma olhada no que temos pronto até agora, a bagagem que estamos herdando, para seguirmos daqui.

Neste momento, provavelmente há dois cenários: um em que você está me acompanhando desde o primeiro curso e você já conhece isso que vou mostrar, ou você está começando agora, seja lá qual tenha sido seu caminho até aqui. Vamos dar uma revisada para entendermos qual a base necessária para este curso.

Começamos pela biblioteca de componentes. Tivemos um curso em que desenvolvemos componentes, mandamos para o GitHub e plugamos o GitHub no NPM, fazendo, inclusive, publicações automáticas. Então, temos a base, temos a biblioteca de componentes já pronta.

Se você tem já o seu repositório com os seus componentes, maravilha; se você não tem, fica tranquila, vou deixar tudo linkado para você na atividade Preparando o Ambiente.

Depois, com a paleta de componentes pronta, partimos para a área de autenticação. O que fizemos nesse momento? Nós trabalhamos com a modal de login, com a modal de cadastro de usuário e, inclusive, tivemos requisições realizadas com usuário autenticado.

Ou seja, fazemos o login, guardamos o token, enviamos o token para o backend e ele retorna a listagem de pedidos. Então, esse ciclo da autenticação do usuário nós também já executamos.

Mais uma vez, se você não tem repositório, fica tranquilo, eu também vou deixar o link no Para Saber Mais e você vai conseguir baixá-lo e começar daqui.

Agora que já vimos a bagagem que estamos herdando, que o AluraBooks já pronto com a lógica de login, vamos ver o desafio de hoje, que é justamente trabalhar a parte de produtos e categorias. O que temos para hoje?

Vamos trabalhar na listagem dos livros em si, dada uma categoria, e na página de detalhes de um livro. Isso vai servir para trazermos conceitos muito importantes sobre obtenção de dados, ou seja, sobre data fetching.

Para seguirmos, vamos ter dois projetos rodando locais, um deles é o AluraBooks e outro é uma API fake, uma API de mentira, que vai servir de backend para nós.

Já tenho esses dois projetos na minha máquina, na minha área de trabalho. Vou mostrar para vocês, vou no Terminal pedir para ele listar as pastas. Vou voltar um nível, já estou dentro da pasta do AluraBooks.

Agora, sim, estou no Desktop, que é a minha área de trabalho. Vou pedir para o Terminal listar as pastas para mim. Repara, tenho os três projetos clonados, o alurabooks em si, que é o projeto da aplicação AluraBooks, o api-alurabooks, que é a API de mentira, e o ds-alurabooks.

Então, tenho aqui baixado todos os projetos que pudemos usar para consulta, vamos poder dar uma olhada durante as atividades, e vou deixar tudo justificado para você na atividade Preparando o Ambiente, linkando para esses projetos, o que você precisa para ter eles rodando etc.

Vou voltar para a pasta da API e vou rodar o comando que levanta, que é o npm run start-auth. Ele vai mostrar a mensagem API disponível em http://localhost:8000, e o outro projeto que está rodando, vou parar e rodar de novo para você ver, é com npm start, que é o alurabooks em si, é o projeto React que foi desenvolvido.

Voltando para o navegador, vou atualizar a página, temos o model de login e a modal de cadastro, agora estamos prontos para começar. Vamos precisar da API rodando e do AluraBooks rodando para começarmos a desenvolver e obter dados dessa API de uma forma muito organizada e eficaz.

Vamos lá.

Evoluindo o Alura Books - Obtendo as categorias

Agora que temos tudo pronto, o nosso cenário já está montado e os projetos já estão sendo executados, podemos começar a fazer, de fato, o data fetching, a obtenção de dados.

Vamos começar por uma das maneiras mais simples que podemos fazer, sem utilizar muita coisa além do próprio React e do Axios, que já temos disponível no projeto.

Vou para o Terminal, estou com o projeto rodando, vou interrompê-lo e vou abrir o VS Code, code, na pasta do “alurabooks”. Vou fazer isso pelo Terminal, mas você pode abrir primeiro o VS Code e depois a pasta do projeto.

Aqui tem tudo que precisamos, todos os componentes estão disponíveis aqui. Vou abrir, no VS Code, “ALURABOOKS > src > componentes > BarraNavegacao > index.tsx”, esse é o arquivo que vou manipular para fazer a obtenção das categorias.

Hoje, se olharmos entre as linhas 40 e 68, temos manualmente cada categoria no HTML, tem um <li> para Frontend, para Programação, para Infraestrutura, para Business e para Design e UX.

Agora não vamos ter mais isso no código, o que chamamos de hard coded, ou seja, forçado no código, nós vamos obter esses dados da API. E como vamos fazer isso?

Vou voltar no navegador, dessa vez estou usando Firefox, e se eu acessar “localhost:8000”, que é onde roda a nossa API, e pedir o “/categorias”, a API vai entregar um JSON com a lista de categorias.

Como estou vendo pelo Firefox e ele entende que isso é um JSON, ele já formata e fica mais elegante a visualização. Se você não está usando esse navegador, a visualização pode ficar diferente.

Mas, basicamente, o que temos aqui é um array de objetos, cada objeto tem um ID, um nome e um slug. O slug é uma forma mais legível, só que sem acentos, sem pontos e sem espaços, para podermos colocar na URL.

No AluraBooks, vamos ter o “localhost:8000” e quero ter algo como “localhost:8000/categorias/frontend”. Então, esse “frontend”, esse segmento, é o slug, é esse campo que vamos utilizar para obter os dados.

Poderíamos ir pelo ID, mas se tivesse, por exemplo, “/categorias/1”, esse “/1” para o usuário não diz muita coisa, então não vamos fazer isso, vamos com o slug, “/categorias/frontend”, é isso que queremos.

Agora que já sabemos como obter essas categorias da API, vamos fazer a requisição. Vou voltar para o VS Code e, no começo do código, temos o useState de modalCadastroAberta e modalLoginAberta.

Logo a seguir, vou criar mais um estado, que vai ser uma constante, const [categorias, setCategorias] = useState<ICategoria>([]). Ainda não temos uma interface que representa o dado que vem da API, então vamos criá-la.

Fiz um “Ctrl + C” no nome da categoria, ICategoria, já temos uma pasta de interfaces, “src > interfaces”. Vou clicar com o botão direito sobre “interfaces”, vou pedir um novo arquivo e salvá-lo como “ICategoria.ts”.

Agora, vou fazer export interface ICategoria. Vimos que temos um ID, que é um número, id: number; temos o nome, que é uma string, nome: string; e temos o slug, que é uma string, slug: string. Essa é a nossa categoria.

Agora que eu implementei a interface, vou voltar para BarraNavegacao, do “index.tsx”, e vou pedir para o VS Code, com “Ctrl + Espaço”, identificar que tenho um export de ICategoria dentro de interfaces/ICategoria.

Fiz “Command/Ctrl + B” para fechar o menu esquerdo de navegação, onde ficam todos os arquivos e pastas, e temos um estado inicial. O VS Code já está reclamando, graças ao TypeScript, que eu não posso atribuir como array um useState de categoria.

É porque eu esqueci de colocar os colchetes. Esse elemento vai ser uma lista de categorias, const [categorias, setCategorias] = useState<ICategoria[]>([]). Agora vamos para o Axios. Já vimos, em cursos anteriores, que temos, encapsulado, um objeto chamado http.

Repare, o VS Code já sugeriu o import para mim. Ele nada mais é do que uma instância do Axios que tem a URL base da API. Então, podemos fazer http.get(‘categorias’).

Ele vai automaticamente preencher http://localhost, isso já vem pronto porque foi configurado no arquivo. Vamos dar uma olhada? Vou voltar no projeto, “src > http > index.ts”, está aqui nosso objeto http = axios.create e a baseURL, que é justamente o endereço base da API.

Tem também os headers dizendo que ele vai enviar JSON e receber JSON. Agora, sim, voltando lá, esse elemento é baseado em promessa, promise based, então podemos fazer .then, ou seja, quando essa promessa for de fato cumprida com sucesso, vamos ter acesso a uma resposta, .then(resposta => ).

O que podemos fazer aqui, como estamos trabalhando com o TypeScript, é dizer que a resposta de http.get vai retornar um array de ICategoria. Então, http.get<ICategoria[]>(‘categorias’).

Isso vai fazer com que o TypeScript entenda que o resposta.data é um array de categorias. Só para ficar bonito, vou abrir um arrow function dentro de .then e vou fazer um console.log(resposta.data).

Além disso, ou fazer setCategorias(resposta.data). Isso deveria ser suficiente, porém, tem uma “pegadinha” aqui. Quando eu quero que esse http.get seja executado?

Só, e somente só, na primeira vez que esse componente for renderizado, eu não quero que ele fique pedindo toda hora. Então, para executar esse código, fiz um “Ctrl + X” do que fizemos e vou chamar useEffect.

Ele me permite passar a função que eu quero que seja executada e, no segundo argumento, espera um array de dependências para esse efeito que quero gerar.

Quando passo um array de dependências vazio, o useEffect só vai ser executado quando o componente for montado. Agora, sim, dentro de useEffect, faço “Ctrl/Command + V” para colar o http.get<ICategoria[]>(‘categorias’) e o .then(resposta =>.

Vou salvar. Nós falamos muito e escrevemos muito, vamos ver se isso funciona. Vou no navegador Firefox, volto na aplicação, vou deixar o console e recarregar a página.

Ele está me dizendo que ele não conseguiu se conectar com o localhost, vamos ver por quê. Porque está parada a aplicação, então npm start, eu parei para ver o VS Code e depois não iniciei de novo.

Está iniciando, agora vou recarregar. Repara que está aqui, no console do navegador, ele está jogando o array de objetos, ou seja, o array de categorias.

Se eu olhar na aba de “Rede”, filtrar por “XHR” e recarregar a página, ele está fazendo o request das categorias. Então, era exatamente isso que precisávamos.

Agora que temos, de fato, esses dados, podemos trabalhar com eles dentro do nosso componente. Vamos lá.

Evoluindo o Alura Books - Mapeando os dados

Agora que já temos, de fato, as categorias dentro do nosso estado, o que vamos fazer é um map, um .map em cima disso.

Aqui, na linha 54, tenho o primeiro item de lista e vou apagar os demais, que vão até a linha 78. Vou deixar só o primeiro <li> e vou fazer “Ctrl + X”, vou cortá-lo.

Vou abrir as chaves e fazer {categorias.map()}, que é para ter todas as categorias renderizadas. No .map, temos acesso a categoria em si e o que queremos fazer é retornar um item de lista, {categorias.map(categoria => (<li>.

Esse Link to é do React Router, não é aquele personagem daquela franquia famosa. Esse Link não vai ser mais para /, eu quero que ele seja para /categorias/SLUG, e eu tenho um categorias.slug.

Então, vou alterar essa aspas simples para crase, para podermos fazer uma interpolação de string, além disso, vou colocar entre chaves, vou abrir no começo e fechar no final, <Link to={‘/categorias/SLUG’}>.

Agora, no SLUG, eu posso interpolar a string aqui, vou fazer <Link to={‘ /categorias/${categoria.slug}’}>. Outra coisa que vou fazer é, no primeiro elemento que estou retornando, que é o li, vou passar <li key={categoria.id}>.

Esse key é aquele item que o React espera sempre que renderizamos uma lista. O que mais tenho que fazer aqui? Agora não mais vou ter esse frontend fixo, vou abrir e fechar chaves e chamar {categoria.nome}.

Fiz o categorias.map e, para cada categoria, vou retornar um item de lista com um link apontando para a página de categorias e para o categoria.nome.

Vou agora voltar no navegador e ver se isso está funcionando. Recarrego a página, dou uma olhada no console, não tem erro no console, só tem o array de categorias. Lá em cima, na barra de navegação, se faço hover e clico em “Programção”, ele me joga para “/categorias/programação”, exatamente como precisávamos.

Só que nós não temos essa rota ainda, precisamos desenvolver essa página. Vamos devagar porque, antes de colocarmos a mão na massa e desenvolver essa página, vamos entender um pouco o que é essa obtenção de dados que fizemos aqui, qual é o padrão que utilizamos.

Temos o useEffect, fazemos o http.get e no sucesso setando um estado local. Vamos entender que tipo de data fetching é esse e quais as alternativas que temos quando falamos de React. Vamos lá.

Sobre o curso React: obtendo dados com React Query

O curso React: obtendo dados com React Query possui 96 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:

• Evoluindo o Alura Books
• Página de categorias
• React Query
• Listando os livros
• Programação defensiva