Desenvolvimento Web Front-end Tutoriais Tutoriais Técnicos cache automático, desenvolvimento React eficiente, Desenvolvimento Web, estados persistentes, frontend moderno, guia completo, JSON Server, otimização de API, páginação com React Query, paginação no React, React pagination tutorial, React Query, React Query com TypeScript, React Router, TypeScript no React, useQuery Dev Glaubin 25 de dezembro de 2024 0 Comentários

Paginação no React com React Query: Simplifique Seu Código

Se você já tentou implementar paginação no React, sabe que às vezes o rolê parece mais complicado do que deveria. Entretanto, existem soluções que tornam isso muito mais simples. Isso é porque, sem as ferramentas certas, acabamos escrevendo mais código do que o necessário para resolver problemas simples. No entanto, com as soluções adequadas, como o React Query, tudo fica mais fácil. Mas calma aí, porque hoje vamos simplificar essa parada usando o React Query, uma biblioteca que não só facilita o fetch de dados, como também gerencia cache e mantém tudo suave. Bora aprender como implementar paginação no React com React Query? Vem comigo.

Preparando o Ambiente para Paginação no React

Antes de começar, é importante preparar o ambiente, porque uma configuração inicial bem feita facilita o desenvolvimento e evita problemas futuros. Certifique-se de ter o React instalado. Além disso, adicione o React Query com o seguinte comando:

npm install @tanstack/react-query

Se você usa TypeScript (o que eu super recomendo, principalmente pra evitar bagunça no retorno de APIs), o React Query já vem com suporte nativo pra isso. Ponto pra ele!

Criando um Servidor Fake com JSON Server para Paginação no React com React Query

Pra ter alguma coisa pra paginar, vamos simular uma API com JSON Server. Isso nos permitirá testar a paginação de forma prática. Além disso, esse ambiente será útil para simular cenários reais de desenvolvimento. É rapidinho:

Instale o JSON Server como dependência de desenvolvimento:

npm install json-server --save-dev

Adicione no `package.json` um script para rodar o servidor:

"scripts": { "server": "json-server --watch server.json --port 3333" }

Crie um arquivo `server.json` com alguns dados de exemplo:

{ 
  "tags": [ 
    { "id": 1, "title": "React" }, 
    { "id": 2, "title": "Vue" }, 
    { "id": 3, "title": "Angular" }, 
    { "id": 4, "title": "Svelte" } 
  ] 
}

Rode o servidor:

 npm run server

Agora você tem uma API rodando em http://localhost:3333/tags com suporte a paginação.

Configurando o React Query para Paginação no React

A mágica começa aqui. Para começar, vá até o arquivo principal do React (main.jsx ou index.js) e configure o QueryClientProvider, que será responsável por gerenciar o React Query. Dessa forma, você prepara o ambiente para que as requisições sejam realizadas de maneira eficiente:

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import App from "./App";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

Essa configuração é essencial. Afinal, sem ela, nada funciona corretamente.

Fazendo a Requisição com useQuery no React Query

Com a API configurada e o React Query pronto, o próximo passo é implementar a paginação. Assim, conectaremos os dados da API com a interface de maneira eficiente. Primeiro, instale a dependência para usar React Router, porque vamos salvar o estado da página diretamente na URL (chamado de URL State):

npm install react-router-dom

Posteriormente, atualize o arquivo principal para usar as rotas:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <Router>
    <Routes>
      <Route path="/" element={<App />} />
    </Routes>
  </Router>
);

No componente App.jsx, configure o React Query para fazer a requisição e, além disso, adicionar paginação. Aqui está um exemplo básico:

import { useQuery } from "@tanstack/react-query";
import { useSearchParams } from "react-router-dom";

const fetchTags = async (page, perPage) => {
  const response = await fetch(
    `http://localhost:3333/tags?_page=${page}&_limit=${perPage}`
  );
  const data = await response.json();
  return data;
};

const App = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const page = parseInt(searchParams.get("page")) || 1;

  const { data: tags, isLoading } = useQuery(
    ["tags", page],
    () => fetchTags(page, 5),
    { keepPreviousData: true }
  );

  const handleNextPage = () => {
    setSearchParams({ page: page + 1 });
  };

  const handlePreviousPage = () => {
    setSearchParams({ page: Math.max(page - 1, 1) });
  };

  if (isLoading) return <p>Carregando...</p>;

  return (
    <div>
      <h1>Paginação no React com React Query</h1>
      <ul>
        {tags.map((tag) => (
          <li key={tag.id}>{tag.title}</li>
        ))}
      </ul>
      <button onClick={handlePreviousPage} disabled={page === 1}>
        Página Anterior
      </button>
      <button onClick={handleNextPage}>
        Próxima Página
      </button>
    </div>
  );
};

export default App;

Como Isso Funciona?

useQuery: Primeiramente, usamos o useQuery para buscar os dados da API. Além disso, a queryKey é crucial, pois identifica cada requisição de forma única (nesse caso, associada à página atual). Isso garante que cada página seja tratada de maneira independente.
Cache Automático: Em seguida, o React Query salva em cache os dados de cada página. Por isso, se você já visitou a página 2 e voltar nela, a resposta será instantânea, reduzindo o tempo de carregamento e melhorando a experiência do usuário.
Estados Persistentes: Além disso, salvamos o estado da página diretamente na URL usando useSearchParams. Dessa forma, o usuário pode compartilhar o link da página atual sem perder o estado. Como resultado, a navegação se torna mais prática e consistente.

Melhorando a Experiência com Placeholders

Primeiramente, é importante entender que quando o React Query faz uma nova requisição para dados, ele atualiza o estado da aplicação assim que os dados são retornados. No entanto, durante esse processo, a tela pode apresentar “piscadas” enquanto os dados anteriores são substituídos pelos novos.

você pode ativar a propriedade keepPreviousData. Essa opção mantém os dados anteriores visíveis até que os novos dados sejam carregados, proporcionando uma experiência de usuário mais fluida. Além disso, enquanto os dados antigos permanecem visíveis, os novos são carregados em segundo plano. Por outro lado, isso também reduz a sensação de lentidão durante a navegação.

const { data: tags, isLoading } = useQuery(
  ["tags", page],
  () => fetchTags(page, 5),
  { keepPreviousData: true }
);

Dessa maneira, os dados antigos permanecem na tela enquanto os novos são carregados.

Paginação no React com React Query e o TypeScript

Se você utiliza TypeScript no seu projeto, voc é declarar os tipos retornados pela API. Isso não apenas melhora a legibilidade do código, mas também ajuda a prevenir erros futuros. Dessa forma, você terá sugestões automáticas enquanto codifica e evitará erros comuns. Use um site como o JSON to TypeScript para gerar os tipos:

type Tag = {
  id: number;
  title: string;
};

type TagResponse = Tag[];

Por último, adicione esses tipos na sua chamada ao React Query:

const { data: tags }: { data: TagResponse } = useQuery(
  ["tags", page],
  () => fetchTags(page, 5),
  { keepPreviousData: true }
);

Conclusão

E aí, viu como a paginação no React não precisa ser um bicho de sete cabeças? De fato, ao usar o cache automático e o estado persistente na URL, sua aplicação se torna mais rápida, organizada e amigável para o usuário. Além disso, a melhor parte é que o React Query faz a maior parte do trabalho pesado pra você. Assim, da próxima vez que precisar lidar com paginação, você já sabe exatamente o que fazer para simplificar sua vida.

Agora é com você! Portanto, ajuste o código, brinque com os parâmetros e veja como ele se adapta às suas necessidades. Por fim, lembra: paginar dados nunca mais vai ser aquele drama! 🚀

Publicar comentário Cancelar resposta

O que temos aqui?

Hidratação no Front-End: O que é e como ela resolve problemas de SSR e CSR

Guia Definitivo: Como e Quando Usar find e findIndex no JavaScript

Diferença entre every e some no JavaScript: O Guia Definitivo para Quem Já Quebrou a Cabeça com Arrays

Testes Unitários no Angular: Chega de Código Porco

Angular 18 Zoneless Mode, Como Usar e Melhorar a Performance

Error Boundaries no React: Salve Sua Aplicação de Crashs Desnecessários

Rust API com Actix: Como construir seu primeiro CRUD completo

Melhores Práticas com Angular Signals em 2025

Qual é melhor: CSS, SASS ou SCSS?

Novos Recursos do CSS em 2025: O que tem de bom e o que é puro hype?