React Query vs SWR: qual data fetcher?
React Query (TanStack Query) é um gerenciador completo de estado de servidor; SWR é um data fetcher enxuto e focado de stale-while-revalidate.
O TanStack Query lida com cache, refetching em background, paginação, mutations, invalidação e suporte offline com uma API rica, tornando-se uma solução completa de estado de servidor. O SWR (da Vercel) foca em um hook mínimo de stale-while-revalidate com uma superfície menor, ótimo para apps pesados em leitura e integração próxima com o Next.js. React Query vence em recursos e ferramentas de mutation; SWR vence em minimalismo e uma API pequena e focada.
| React Query | SWR | |
|---|---|---|
| Escopo | Gerenciador completo de estado de servidor | Fetcher focado |
| Mutations | Ricas, embutidas | Mais leves |
| Superfície da API | Maior | Mínima |
| Devtools | Excelente | Básico |
| Melhor para | Estado de servidor complexo | Fetching enxuto pesado em leitura |
Caso de uso e recursos
React Query serve a apps com estado de servidor complexo: muitas mutations, grafos de invalidação, paginação e necessidades offline, apoiados por devtools fortes. SWR serve a apps mais simples e pesados em leitura que querem um fetcher pequeno e ergonômico com boa integração ao Next.js. Ambos compartilham a filosofia stale-while-revalidate.
Testes e CI
Ambos mockam de forma limpa com interceptadores de fetch como o MSW. Qualquer um roda em runners gerenciados, onde runners mais rápidos encurtam as suítes de testes de data-fetching e de integração.
O veredito
Precisa de mutations ricas, invalidação, paginação e devtools fortes: React Query. Quer um fetcher mínimo e focado para apps pesados em leitura: SWR. React Query é a solução mais completa de estado de servidor; SWR é a opção enxuta e ergonômica.