React: Simplificando o Estado e o Cache de Dados

React 25 de Mar de 2024

Gerenciar o estado e o cache de dados externos pode ser uma tarefa complexa e desafiadora. É aqui que o TanStack React Query se destaca, oferecendo uma solução elegante e eficiente para buscar, sincronizar e gerenciar o estado de dados de maneira otimizada em aplicações React. Este artigo explora como o TanStack React Query simplifica o gerenciamento de dados assíncronos, com exemplos práticos de código para ilustrar sua aplicabilidade e eficácia.

Introdução ao TanStack React Query

TanStack React Query é uma biblioteca que fornece ferramentas poderosas para o gerenciamento de estados de dados remotos em aplicações React, permitindo aos desenvolvedores realizar operações de busca, atualização e cache de dados com facilidade. Ao automatizar processos complexos, como o cache de dados e a sincronização de estado com o servidor, React Query melhora significativamente a performance e a experiência do usuário.

Principais Características

Gerenciamento Automático de Cache: Automatiza o cache de consultas e a invalidação de cache, reduzindo a necessidade de buscar dados que já estão disponíveis localmente.
Operações de Busca e Mutação: Facilita a execução de buscas de dados e mutações (criação, atualização, exclusão) através de hooks simples e poderosos.
Sincronização de Dados: Mantém a UI sincronizada com os dados mais recentes, melhorando a interatividade e a consistência dos dados.
Ferramentas de Desenvolvimento: Inclui DevTools integradas para inspeção de cache, visualização de consultas e mutações em tempo real, auxiliando no debugging.

Instalação

Para começar a usar o TanStack React Query em seu projeto, primeiro instale a biblioteca gerenciador de pacotes:

$ npm i @tanstack/react-query
# or
$ pnpm add @tanstack/react-query
# or
$ yarn add @tanstack/react-query
# or
$ bun add @tanstack/react-query

Configuração do Cliente React Query

const queryClient = new QueryClient({})

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <Posts />
    </QueryClientProvider>
  </React.StrictMode>,
)

Criação do Cliente React Query:

A instância de QueryClient é responsável por gerenciar o estado das consultas e o cache no React Query.
O QueryClientProvider é responsável por conectar e fornecer um **QueryClient**ao seu aplicativo.

Exemplos Práticos

Buscando Dados com `useQuery`

O hook useQuery é utilizado para buscar dados assíncronos. Ele retorna um objeto com os dados da consulta, estado de carregamento e erro, facilitando a manipulação desses estados na UI.

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

interface Post {
  id: number;
  title: string;
}

async function fetchPosts(): Promise<Post[]> {
  const { data } = await axios.get<Post[]>('<https://jsonplaceholder.typicode.com/posts>');
  return data;
}
export function Posts() {
  const { data, error, isLoading } = useQuery<Post[]>({queryKey: ['posts'], queryFn: fetchPosts});

  if (isLoading) return <div>Carregando...</div>;
  if (error) {
    const message = axios.isAxiosError(error) && error.response ? `Erro: ${error.response.status} ${error.response.statusText}` : error.message;
    return <div>{message}</div>;
  }

  return (
    <div>
      {data?.map(post => (
        <p key={post.id}>{post.title}</p>
      ))}
    </div>
  );
}

useQuery Hook: Este hook é utilizado para realizar a operação de busca dos dados de posts. Ele é configurado com um objeto que inclui a queryKey (uma chave única que identifica a consulta) e a queryFn (a função que busca os dados). O hook gerencia o estado de carregamento, erro e dados da consulta automaticamente.
Carregamento: Se isLoading for true, o componente exibe um indicativo de carregamento. Isso acontece quando a consulta está buscando dados e ainda não completou.
Erro: Se um erro ocorrer durante a busca, é verificado se é um erro do Axios e, se for, tenta-se extrair uma mensagem de erro mais detalhada. Caso contrário, usa-se a mensagem de erro padrão. Então, o componente exibe uma mensagem de erro.
Exibição dos Dados: Se a busca for bem-sucedida e os dados forem recebidos, eles são mapeados e exibidos em parágrafos (<p>). O operador ? antes de .map assegura que o mapeamento só ocorrerá se data não for nulo.

TanStack React Query revoluciona o gerenciamento de estados e cache de dados em aplicações React, tornando-o mais intuitivo, eficiente e menos propenso a erros. Com funcionalidades como cache automático, sincronização de dados e ferramentas de desenvolvimento integradas, React Query é uma ferramenta indispensável para desenvolvedores modernos que buscam otimizar a performance e a qualidade de suas aplicações web.