0Pricing
Frontend Academy · Aula

SWR e React Query para armazenamento em cache de dados

Utilizar SWR ou TanStack Query para obter, armazenar em cache, eliminar duplicados e revalidar dados do servidor, substituindo padrões manuais de obtenção com useEffect.

SWR e React Query para armazenamento em cache de dados é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

O estado do servidor é diferente

Dados de rede não são apenas estado comum. Eles precisam de: cache, deduplicação, atualização em segundo plano, acompanhamento de carregamento e erros e novas tentativas. Os padrões manuais de busca com useEffect + useState reimplementam tudo isso de forma inadequada.

SWR vs TanStack Query

SWR (Vercel): pequeno, simples e baseado apenas em hooks. TanStack Query (anteriormente React Query): maior e com mais recursos (mutações, consultas infinitas, pré-carregamento e ferramentas de desenvolvimento). Ambos são excelentes.

SWR — uso básico

useSWR(key, fetcher) retorna dados, erro e estado de carregamento. Os dados são armazenados em cache pela chave e deduplicados entre componentes.

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then(r => r.json());

function Profile() {
  const { data, error, isLoading } = useSWR('/api/me', fetcher);

  if (error) return <ErrorMessage error={error} />;
  if (isLoading) return <Spinner />;
  return <h1>{data.name}</h1>;
}

SWR — comportamento da revalidação

Por padrão, o SWR revalida no focus (quando a aba recupera o foco) e ao reconectar. Ele retorna imediatamente o valor armazenado em cache (“obsoleto”) e o atualiza em segundo plano (“enquanto revalida”).

SWR — mutação

mutate(key) revalida uma consulta armazenada em cache. Passe novos dados como segundo argumento para fazer uma atualização otimista.

import useSWR, { mutate } from 'swr';

async function updateProfile(updates) {
  // Optimistic update — UI reflects change immediately
  mutate('/api/me', { ...currentData, ...updates }, false);
  await fetch('/api/me', { method: 'PUT', body: JSON.stringify(updates) });
  // Revalidate to get the server's canonical state
  mutate('/api/me');
}

TanStack Query — configuração

Envolva seu aplicativo em um QueryClientProvider com um QueryClient configurado.

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

const client = new QueryClient({
  defaultOptions: {
    queries: { staleTime: 30000, retry: 2 }
  }
});

function App() {
  return (
    <QueryClientProvider client={client}>
      <Routes />
    </QueryClientProvider>
  );
}

useQuery

useQuery({ queryKey, queryFn }) busca e armazena os dados em cache.

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

function UserList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(r => r.json()),
    staleTime: 60_000 // fresh for 1 minute
  });

  if (isLoading) return <Spinner />;
  if (error) return <ErrorMessage error={error} />;
  return <ul>{data.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

useMutation para gravações

useMutation gerencia POST/PUT/DELETE com estados integrados de pendência e erro, além de um hook onSuccess para invalidar caches.

import { useMutation, useQueryClient } from '@tanstack/react-query';

function CreateUserForm() {
  const qc = useQueryClient();
  const m = useMutation({
    mutationFn: (user) => fetch('/api/users', { method: 'POST', body: JSON.stringify(user) }),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['users'] })
  });

  return <button onClick={() => m.mutate({ name: 'Alice' })} disabled={m.isPending}>Create</button>;
}

Invalidação de consultas

Depois de uma mutação, invalide as consultas relacionadas para acionar uma nova busca. queryClient.invalidateQueries({ queryKey: ['users'] }) marca as consultas como obsoletas e busca os dados novamente se estiverem montadas.

Atualizações otimistas

O TanStack Query oferece suporte completo a atualizações otimistas por meio de onMutate, onError e onSettled.

useMutation({
  mutationFn: updateUser,
  onMutate: async (newUser) => {
    await qc.cancelQueries({ queryKey: ['user', newUser.id] });
    const previous = qc.getQueryData(['user', newUser.id]);
    qc.setQueryData(['user', newUser.id], newUser);
    return { previous };
  },
  onError: (_, newUser, ctx) => {
    qc.setQueryData(['user', newUser.id], ctx.previous); // rollback
  },
  onSettled: (_, __, newUser) => {
    qc.invalidateQueries({ queryKey: ['user', newUser.id] });
  }
});

Consultas infinitas

useInfiniteQuery gerencia listas paginadas ou com rolagem infinita — disponibiliza fetchNextPage e acompanha todas as páginas carregadas.

Ferramentas de desenvolvimento do React Query

Adicione @tanstack/react-query-devtools para obter um painel flutuante que mostra todas as consultas armazenadas em cache, seus estados, e permite invalidá-las manualmente.

Verificação rápida

Qual é o principal benefício de usar SWR ou TanStack Query em vez de useEffect + fetch manualmente?

Recapitulação: SWR e React Query

O estado do servidor precisa de cache, deduplicação e revalidação. SWR: pequeno e simples. TanStack Query: mais recursos (mutações, consultas infinitas e ferramentas de desenvolvimento). useQuery para leituras, useMutation para gravações. invalidateQueries depois de mutações. Atualizações otimistas com onMutate/onError. Ambos tornam obsoleto o uso manual de useEffect + fetch em aplicativos de produção.

Perguntas Frequentes

A aula “SWR e React Query para armazenamento em cache de dados” é grátis?

Sim — o texto completo de “SWR e React Query para armazenamento em cache de dados” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “SWR e React Query para armazenamento em cache de dados”?

Utilizar SWR ou TanStack Query para obter, armazenar em cache, eliminar duplicados e revalidar dados do servidor, substituindo padrões manuais de obtenção com useEffect. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “SWR e React Query para armazenamento em cache de dados”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. API Fetch: GET POST PUT DELETE
  2. Axios: interceptadores e URL base
  3. Tratamento de erros: códigos de estado HTTP
  4. SWR e React Query para armazenamento em cache de dados
← Voltar para Frontend Academy