React Query: gerenciando HTTP State

Configuração do React Query - Apresentação

Olá, estudante da Alura! Tudo bem? Sou Patrícia Silva e quero dar as boas-vindas a mais este curso.

Audiodescrição: Patrícia Silva se indentifica como uma mulher branca. Possui olhos castanhos e cabelos cacheados e escuros. No rosto, usa um óculos arredondado de aro preto. No corpo, veste uma camiseta verde musgo. Ao fundo, um ambiente iluminado com cores azul e lilás.

Este curso é focado em React Query, uma biblioteca que utilizaremos para fazer a integração entre o front-end e o back-end de uma aplicação já existente.

Essa aplicação é o Code Connect, uma rede social para pessoas desenvolvedoras. Como mencionado, os componentes da aplicação já estão prontos, mas ainda precisam de integração.

Conhecendo o projeto

Na tela da aplicação, aberta no navegador, temos o trabalho pronto que desenvolveremos ao longo do curso.

Vamos fazer o front-end e o back-end se comunicarem utilizando o React Query através das ferramentas que ele nos provê. Dessa forma, conseguiremos obter os dados para listar todas as postagens, entrar na página de detalhes de cada um e agregar informações, mostrando os dados corretamente.

O que aprenderemos no curso?

Trabalharemos com cache, paralelismo e queries dependentes para fazer essa agregação de dados - como categorias e a classificação desse post - e mostrá-los na tela. Além disso, aplicaremos técnicas e estratégias para tornar a aplicação e as páginas mais resilientes. Por vezes, o back-end pode ser instável, e nós, no front-end, temos que garantir uma boa disponibilidade e usabilidade desses dados.

Veremos como configurar e utilizar essa ferramenta, que nos ajudará a observar o que acontece internamente nessas chamadas assíncronas, cache e dados gerenciados pelo React Query.

Pré-requisitos

Para trabalhar com React Query, você deve saber como trabalhar com React, com Async/Await e com Promises do JavaScript.

Não trabalharemos com estado global, reducers, ou nada do tipo. Basta passarmos uma função que resolva os dados que precisamos ou que lance erros, e teremos sucesso.

Nos veremos no próximo vídeo!

Configuração do React Query - Preparando o ambiente e desafio

Como já mencionamos, esta é uma aplicação que funciona como uma rede social para pessoas desenvolvedoras. Trata-se de uma aplicação Full Stack, onde o front-end e o back-end já estão desenvolvidos, mas ainda não se comunicam. Isso é o que vamos fazer ao longo deste curso.

Antes de começar, vamos nos familiarizar com a estrutura do projeto.

Conhecendo o projeto

Devemos clonar o projeto e acessá-lo em um editor de código como o VS Code da nossa máquina. Vamos trabalhar, basicamente, dentro da pasta "src".

Acessando o explorador lateral, temos dois grandes pilares dentro da pasta "app", que fica dentro de "src":

• A página page.js que lista todos os posts da aplicação;
• A página page.js que possui detalhes dos posts, localizada dentro da subpasta "posts/[slug]".

Ainda no interior da pasta "app", vale mencionar que temos as pastas:

• "api" com os endpoints para o back-end;
• "error";
• "components", com os componentes da aplicação.

Entretanto, não vamos trabalhar com elas, nem criar componentes. Nosso trabalho, basicamente, é fazer a integração com o front-end e o back-end.

Iniciando o Docker Desktop

Antes de começar a integração, temos que levantar essa aplicação. Temos alguns passos para fazer essa página renderizar de primeira.

Para isso, vamos abrir um novo terminal no VS Code, clicando nos menus superiores "Terminal > New Terminal". Nessa etapa, precisamos ter o Docker Desktop instalado, porque vamos rodar o seguinte comando na raiz do projeto:

docker compose up

O docker compose up sobe um contêiner que vai servir a base de dados - que, por sua vez, será usada pelo back-end para recuperar e salvar os posts. Portanto, o Docker precisa ficar rodando enquanto a aplicação está em pé.

Após o comando ser executado, vamos acessar o Docker Desktop instalado. Em seu interior, na seção "Containers", veremos que este contêiner está rodando sem erros. É isso que queremos.

Vamos deixá-lo rodando, pois é isso que precisamos.

Voltando ao terminal, este script precisa ficar executando em segundo plano, então, não podemos pará-lo. Vamos clicar no ícone de "+" no canto superior direito para abrir um novo terminal, no qual precisamos fazer a instalação das dependências do projeto.

Instalando dependências

Para instalar dependências, usaremos o yarn. Você pode usar o que preferir, mas recomendamos o yarn para nos alinharmos.

yarn

Após este, faremos outro comando, o yarn build. Além de fazer o build da aplicação, esse comando vai migrar alguns dados que vão pré-popular aquele banco de dados.

yarn build

Posteriormente, renderizaremos as páginas e os posts, e fazendo isso, não teremos que nos preocupar com essas migrações de dados.

Feito isso, será que tudo funciona? Vamos subir a aplicação no localhost na porta 3000 com um yarn dev.

yarn dev

Após isso, veremos o link do localhost da porta 3000 como retorno:

http://localhost:300

Clicando nele, abriremos a página do localhost na porta 3000 em uma nova guia do navegador. Em seu interior, veremos que se trata de uma página toda preta, com um layout básico, e sem posts.

É isso mesmo que queremos. Isso significa que subimos a aplicação com sucesso.

Configuração do React Query - Instalação e configuração do React-Query

Vamos retornar ao VS Code para configurar e instalar o React Query. Podemos encerrar o terminal que está executando a aplicação na porta 3000 com "Ctrl+C" e instalar a biblioteca do React Query, muito apreciada no mundo do desenvolvimento.

Instalando o React Query

No terminal, vamos executar o comando abaixo.

yarn add @tanstack/react-query

Ele vai instalar e baixar. É bem rápido.

Configurando o Provider

Nós apenas instalamos a biblioteca. Agora, precisamos configurar o Provider.

O Provider se assemelha a uma caixa de ferramentas do React Query, a qual queremos ter acesso na aplicação.

Acessando o explorador lateral, dentro do caminho de pastas "src > app", vamos criar um arquivo chamado ReactQueryProvider.jsx. Ele será um componente React, dentro do qual vamos configurar esse Provider todo, que explicaremos passo a passo.

Na primeira linha, vamos adicionar um use client. Pulando uma linha, vamos importar o componente QueryClientProvider fornecido pelo @tan-stack/react-query. Esse componente fornece o método QueryClient, que também importaremos para que todos os componentes que usam esse Provider tenham acesso às ferramentas do React Query.

Em breve, vamos conhecer melhor esse método.

ReactQueryProvider.jsx:

"use client";

import { QueryClientProvider, QueryClient } from '@tanstack/react-query';

Pulando mais uma linha, vamos criar uma instância do QueryClient, objeto usado para configurar e gerenciar o cache de todas as operações de busca de dados que faremos. Para isso, vamos criar uma constante chamada queryClient, e vamos instanciar o QueryClient que importamos.

"use client";

import { QueryClientProvider, QueryClient } from '@tanstack/react-query';

const queryClient = new QueryClient()

Com isso, temos esse objeto que vai nos ajudar a configurar e gerenciar tudo isso.

Pulando outra linha, vamos criar esse componente fazendo um export const ReactQueryProvider, que vai receber uma função () => {} com o {children} como parâmetro.

Entre as chaves, só temos que retornar o componente QueryClientProvider que importamos anteriormente, que vai receber o children entre sua abertura e seu fechamento.

Esse children vai ter acesso à instância das ferramentas do React Query. Para isso, precisamos criar a propriedade que chamaremos de client dentro da tag de abertura do QueryClientProvider, passando entre chaves o queryClient que criamos.

"use client";

import { QueryClientProvider, QueryClient } from '@tanstack/react-query';

const queryClient = new QueryClient()

export const ReactQueryProvider = ({ children }) => {
    return (
        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    );
};

Assim, temos um Provider configurado, e tudo o que passarmos para ele via Props terá acesso a todas as ferramentas do React Query.

Agora vamos usar isso no arquivo layout.js da pasta "app". Acessando-o no final da lista de importações, vamos importar o componente que acabamos de criar, o ReactQueryProvider, de ./ReactQueryProvider.

layout.js:

import { ReactQueryProvider } from "./ReactQueryProvider";

Feito isso, precisamos encapsular a tag body, passando ela como children para o ReactQueryProvider da seguinte forma:

<ReactQueryProvider>
  <body>
    <div className="app-container">
      <div>
        <Aside />
      </div>
      <div className="main-content">
        <SearchForm />
        {children}
      </div>
    </div>
  </body>
</ReactQueryProvider>

Isso significa que todas as páginas do projeto serão renderizadas no Provider. Logo, a página que lista todos os posts, os detalhes das postagens, entre outras informações, terão acesso à caixa de ferramentas do React Query. Nesse caso, teremos uma instância, isto é, uma caixa para todos.

Nossa aplicação é bastante simples, mas há algumas situações em que não é recomendado realizar essa prática. No caso acima, criamos o componente ReactQueryProvider separadamente, mas poderíamos ter configurado ele direto no arquivo layout.js.

No entanto, fizemos dessa forma para organizar melhor o código, e também para que fosse possível reutilizá-lo posteriormente. Não é obrigatório encapsular todo o body com o Provider. Em vez disso, podemos reutilizar o componente em pequenas partes da aplicação.

Por exemplo: suponha que temos um módulo de RH e um módulo financeiro. Esses módulos possuem políticas diferentes de cache e de atualização de dados. Em aplicações complexas como essa, precisamos ter muito controle sobre como iremos gerenciar os dados, então, nesse caso, não seria interessante envolver todas as páginas do layout com o Provider. Em vez disso, aplicamos o Provider em diferentes partes. Se utilizássemos um Provider em cada página, teríamos duas instâncias do React Query, que seria como se tivéssemos duas caixas de ferramentas distintas: uma apenas para o mundo do módulo de RH, e outra apenas para o mundo do módulo financeiro.

Conclusão

Já criamos e configuramos o Provider, que agora envolve toda a aplicação, conforme esperado. Agora, vamos partir para a parte mais legal do processo. Nos encontramos no próximo vídeo!

Sobre o curso React Query: gerenciando HTTP State

O curso React Query: gerenciando HTTP State possui 115 minutos de vídeos, em um total de 37 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:

• Introdução ao React Query: configuração e primeiros passos
• Aprofundando em React Query: API Routes, Custom Hooks e status
• Dominando o cache e estratégias de Fetch com React Query
• Técnicas avançadas de otimização com React Query
• Implementação Retry e Prefetching Query