TanStack Query (React Query)

O TanStack Query é a ferramenta padrão para gerenciamento de estado de servidor (Server State). Ele lida com cache, sincronização e atualização de dados vindos de APIs.

---

Por que usar?

Diferente do Redux, que foca em estado global do cliente, o TanStack Query entende que dados de API são "emprestados" e podem estar desatualizados. Ele automatiza tarefas como:

• Loading states (carregando)
• Error states (erro)
• Cache e revalidação (refetch)
• Paginação e scroll infinito

---

Quando usar?

1. Todas as chamadas GET: Para buscar dados que serão exibidos na tela.
2. Mutations (POST, PUT, DELETE): Para alterar dados no servidor e atualizar o cache local automaticamente.
3. Compartilhamento de dados entre componentes: Dois componentes podem chamar o mesmo hook de Query; o TanStack Query garante que apenas uma requisição seja feita e ambos recebam os mesmos dados.

Exemplo de Uso:

// Hook de busca (Query)
const { data, isLoading } = useQuery({
  queryKey: ['users'],
  queryFn: getUsersAction,
});

// Hook de alteração (Mutation)
const mutation = useMutation({
  mutationFn: updateUserAction,
  onSuccess: () => {
    // Invalida o cache e força a lista de usuários a atualizar
    queryClient.invalidateQueries({ queryKey: ['users'] });
  },
});

---

Quando NÃO usar?

1. Estado Global UI: Coisas como "o modal está aberto?" ou "tema escuro/claro" devem ficar no estado local ou Redux/Zustand.
2. Dados que não vêm de uma API: Se o dado é calculado localmente, use useState ou useMemo.

---

Melhores Práticas

• Query Keys: Use chaves estruturadas ['users', userId] para garantir que o cache seja específico para cada recurso.
• Centralização: Mantenha as definições de useQuery em hooks customizados na Camada de Funcionalidade (Feature), consumindo as Actions da Camada de Aplicação.
• Não ignore o erro: Use a propriedade error ou isError retornada pelo hook para dar feedback ao usuário na Camada de Tela.