📊 Capítulo 13: TanStack Query (Server State)

Especialização em Frontend com React

🗺️ O Ciclo de Cache Stale-While-Revalidate do TanStack Query

sequenceDiagram
    autonumber
    actor C as Componente React
    participant Q as QueryClient (Cache em Memória)
    participant API as Servidor Backend REST

    C->>Q: useQuery({ queryKey: ['produtos'] })
    alt Dados existem no Cache e estão Frescos (staleTime)
        Q-->>C: Retorna dados do Cache instantaneamente! (Zero Loading) ⚡
    else Dados estão Stale (Desatualizados)
        Q-->>C: Retorna dados velhos do cache imediatamente (UI não bloqueia!)
        Q->>API: Dispara busca em background (Background Refetch)
        API-->>Q: Retorna dados novos do banco
        Q->>Q: Atualiza o Cache em memória
        Q-->>C: Re-renderiza o componente com novos dados silenciosamente!
    end

🎯 Slide 1: Server State vs Client State

Client State: Modal aberto, aba ativa, tema escuro (use Zustand).
Server State: Lista de produtos, perfil de usuário, pedidos. Pertence ao servidor e está apenas emprestado no frontend (use TanStack Query!).

🎯 Slide 2: Invalidação e Mutações com `useMutation`

const queryClient = useQueryClient();

const mutacao = useMutation({
  mutationFn: (novoProduto: ProdutoDTO) => api.post('/produtos', novoProduto),
  onSuccess: () => {
    // Invalida a chave e força a re-busca automática dos dados atualizados!
    queryClient.invalidateQueries({ queryKey: ['produtos'] });
  },
});

🎯 Slide 3: Optimistic Updates (Atualização Otimista)

Atualiza a interface do usuário instantaneamente antes mesmo da resposta do servidor chegar, com reversão automática (rollback) em caso de erro 500!