SWR, TanStack Query | React

• SWR, TanStack Query | React

Essas são ferramentas ou bibliotecas utilizadas no desenvolvimento de aplicações web modernas, principalmente para lidar com o gerenciamento de dados remotos, cache e suspense em React.

---

SWR

SWR é uma biblioteca desenvolvida pela Vercel, focada em data fetching (busca de dados) com React. O nome SWR vem de "Stale-While-Revalidate", um padrão de cache que revalida os dados antigos enquanto busca os novos, garantindo que a aplicação permaneça responsiva.

Principais funcionalidades do SWR

1. Revalidação automática: Atualiza os dados automaticamente em segundo plano.
2. Cache integrado: Dados são armazenados localmente para melhorar o desempenho.
3. Suporte a otimizações: Otimizações como revalidação com foco na tela visível.
4. Facilidade com hooks: Fornece uma API simples usando hooks do React.
5. Configuração mínima: Funciona "out-of-the-box".
6. Suporte a polling e revalidação sob demanda.

Exemplo de uso do SWR

npm install swr

import useSWR from 'swr';

// Função de busca de dados
const fetcher = (url) => fetch(url).then((res) => res.json());

export default function App() {
  const { data, error, isLoading } = useSWR('/api/data', fetcher);

  if (error) return <div>Erro ao carregar dados</div>;
  if (isLoading) return <div>Carregando...</div>;

  return (
    <div>
      <h1>Dados:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Funcionalidades avançadas do SWR

1. Revalidação automática em foco da tela:

   const { data } = useSWR('/api/data', fetcher, { revalidateOnFocus: true });

2. Polling com intervalo:

   const { data } = useSWR('/api/data', fetcher, { refreshInterval: 5000 });

3. Revalidação manual:

   const { data, mutate } = useSWR('/api/data', fetcher);
   mutate(); // Atualiza manualmente os dados

---

TanStack Query (anteriormente React Query)

TanStack Query é uma biblioteca mais abrangente e poderosa que SWR, focada em gerenciamento de estados de servidor. Ela é ideal para gerenciar fluxos complexos de busca de dados, cache, sincronização, e muito mais.

Principais funcionalidades

1. Gerenciamento avançado de cache.
2. Revalidação sob demanda ou automática.
3. Manipulação de estados de erro, carregamento e sucesso.
4. Páginas e paginação.
5. Pooling e invalidation.
6. Suporte para SSR e prefetching.

Instalação

npm install @tanstack/react-query

Exemplo básico com useQuery

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

const queryClient = new QueryClient();

function fetchData() {
  return fetch('/api/data').then((res) => res.json());
}

function App() {
  const { data, isLoading, isError } = useQuery(['data'], fetchData);

  if (isLoading) return <div>Carregando...</div>;
  if (isError) return <div>Erro ao carregar dados</div>;

  return (
    <div>
      <h1>Dados:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default function Main() {
  return (
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  );
}

Funcionalidades avançadas

1. Polling:

   useQuery(['data'], fetchData, { refetchInterval: 5000 });

2. Invalidando cache manualmente:

   const queryClient = useQueryClient();
   queryClient.invalidateQueries(['data']);

3. Prefetching:

   queryClient.prefetchQuery(['data'], fetchData);

4. Paginação:

   const { data } = useQuery(['data', page], () => fetchPage(page));

---

Comparação SWR vs TanStack Query

Característica	SWR	TanStack Query
Complexidade	Simples e leve	Completo e poderoso
Cache	Local	Cache avançado com políticas
Prefetch	Limitado	Suporte completo
Páginas e Paginação	Não nativo	Suporte completo
SSR	Simples	Avançado