Vue.js com TanStack Query

Por que usar TanStack Query com Vue.js?

A gestão de estado em aplicações frontend divide-se em Client State (modal aberto, tema escuro, formulários locais) e Server State (dados que vêm do backend via API).

Ferramentas como Pinia ou Vuex foram criadas para Client State. Quando usadas para guardar respostas de API, costumam gerar muito código repetitivo: variáveis manuais de isLoading, error, data, controle de cache e chamadas repetidas. O TanStack Query_ (@tanstack/vue-query) _resolve isso:

1. Cache inteligente fora da caixa: Evita requisições duplicadas (deduplicação) e armazena os dados em memória com estratégias como stale-while-revalidate.

2. Menos boilerplate: Não precisa criar manualmente ref(false) para loading ou blocos manuais de try/catch para capturar erros em cada componente; ele já expõe isPending, isError, data e error prontos e reativos.

3. Sincronização em segundo plano: Revalida dados automaticamente quando a janela ganha foco (refetchOnWindowFocus) ou quando o usuário reconecta à rede.

4. Mutations & Invalidação de Cache: Ao criar/atualizar um recurso (ex: salvar um novo usuário), você simplesmente invalida a chave de cache e a lista se atualiza sozinha sem manipulação manual de arrays.

5. Integração total com TypeScript e Composition API: Inferência automática do tipo retornado pela sua função assíncrona.

O projeto perfeito para começar: Dashboard Administrativo ou Painel de Gestão (SaaS / E-commerce)
Se você quer sentir o real impacto da ferramenta logo no primeiro dia, escolha uma aplicação com telas de listagem, detalhes e edição.

1. Múltiplos componentes precisando dos mesmos dados remotos
   Sem TanStack: Componente A (barra lateral) e Componente B (cabeçalho) precisam saber o saldo da conta ou a lista de notificações. No fluxo tradicional, você cria uma store no Pinia, gerencia flags manuais e faz a chamada no onMounted. Com TanStack: Ambos os componentes simplesmente chamam useQuery({ queryKey: ['notifications'], queryFn: ... }). O TanStack deduplica a requisição (faz apenas 1 chamada HTTP na rede) e compartilha a resposta em memória de forma transparente.

2. Tabelas e listas com filtros, busca e paginação
   Conectar queryKey a variáveis reativas exemplo: (queryKey: ['products', page, searchTerm]). Cada vez que a página ou o filtro muda, o TanStack gerencia a transição, busca os novos dados em segundo plano e mantém os dados anteriores na tela se configurado com placeholderData: keepPreviousData, eliminando telas em branco ou flickers de loading.

3. Operações de CRUD frequentes (Create, Update, Delete)
   Ao salvar ou excluir um item via useMutation, você não precisa atualizar manualmente arrays em stores locais. Basta chamar: queryClient.invalidateQueries({ queryKey: ['products'] }) e a biblioteca cuida de buscar os dados atualizados silenciosamente.

4. Dados que mudam com frequência no servidor
   Dashboards financeiros, filas de pedidos ou status de tarefas.
   Com configurações simples como refetchInterval (polling automático) ou refetchOnWindowFocus (revalidação quando o usuário volta à aba do navegador), a interface fica sempre sincronizada com o backend sem lógica manual.

Quando NÃO compensa começar com TanStack Query

1. Sites estáticos ou Landing Pages: Páginas institucionais com pouca ou nenhuma interação com APIs dinâmicas.

2. Projetos puramente locais: Apps como calculadoras, conversores de arquivo no browser ou ferramentas que salvam tudo exclusivamente no localStorage.

3. Aplicações muito simples de formulário único: Um formulário de contato isolado onde um simples fetch() ou axios.post() em um método local resolve sem necessidade de cache.

Links útil:

Vue | TanStack Query Vue Docs

tanstack.com