Como criar estado reativo com TanStack DB sem usar ORM
Aprenda passo a passo como configurar coleções e queries sincronizadas com TanStack DB e torne sua aplicação mais performática.
Por que isso é importante
Quando pensamos em gerenciamento de estado para aplicações React, frameworks como Redux, Zustand ou até MobX vêm à mente. Mas e se fosse possível usar coleções sincronizadas com SQL-like queries reativas direto conectadas ao banco? TanStack DB faz isso sem precisar de ORM.
O que é TanStack DB?
TanStack DB não é um ORM como Prisma ou Drizzle. Ele é uma biblioteca de gerenciamento de estado baseada em coleções reativas que podem ser sincronizadas com diversas fontes: APIs REST, bancos SQL com streams, armazenamento local ou mesmo apenas memória.
⚠️Atenção
Não tente substituir completamente um ORM usando TanStack DB. A proposta aqui é voltada à gerência de estado em aplicações front-end com sincronização em tempo real.
Coleções no TanStack DB
Coleções representam conjuntos de dados com schema validado (geralmente usando Zod) que podem estar ou não conectadas a fontes externas. Existem tipos como: local (em memória), localStorage, query do TanStack Query e coleções SQL elétricas (encima de Postgres).
ℹ️Dica técnica
A combinação de TanStack DB com ElectricSQL (wrapper realtime para Postgres) permite um fluxo similar ao Firebase, mas usando tecnologias relacionais.
Stream de dados em tempo real
Para conectar sua aplicação ao backend e escutar novas mensagens em tempo real, é usado um hook que abre uma conexão HTTP com streaming (ou websocket). Ao receber novo dado, ele é inserido diretamente na coleção do cliente.
✅Boas práticas
Use insert() da coleção para garantir consistência do schema e beneficiar-se dos triggers internos de atualização que notificam queries ativas.
Queries com useLiveQuery
A função useLiveQuery cria uma query reativa estilo SQL. Seleciona dados existentes e mantém atualizações com base nas mudanças da coleção, tudo com calor do estilo declarativo do React.
⚠️Cuidado
Queries criadas com funções devem ter dependências informadas manualmente, como mudanças do termo de busca, senão o React não atualizará corretamente a query.
Exemplo prático com chat
Utilizamos uma aplicação de chat como vitrine para TanStack DB. As mensagens são inseridas via API, armazenadas em uma coleção no server e propagadas aos clientes por stream. No client, elas são inseridas em uma coleção e consumidas via useLiveQuery.
ℹ️Importante
Você pode colocar múltiplas coleções com diferentes fontes de dados e fazer JOIN entre elas usando o sistema declarativo do TanStack.
Pesquisa em tempo real
Foi aplicado um hook useSearch com cláusula LIKE insensível a caso. Para funcionar corretamente, o termo de busca deve ser passado nas dependências da query.
Aplicações em casos reais
Essa abordagem é ideal em apps colaborativos, chats, dashboards atualizados em tempo real e integrações com bancos SQL que precisam jointuras entre diferentes entidades sem estrutura de ORM.
Diferenças entre ORMs e TanStack DB
TanStack DB
Gerencia estado frontend com sincronização reativa
Prós
- Reativo por padrão
- Não depende de React diretamente
- Alta flexibilidade de dados
Contras
- Sem controle central de schema de banco
- Sem migrations
ORMs (ex: Prisma)
Gerencia persistência de dados no backend
Prós
- Type safety garantido
- Trabalha melhor com migrations
- Integra bem com bancos
Contras
- Não orientado a streams
- Não pensado para frontend
Ferramentas utilizadas
Checklist de Implementação
✅Transforme sua carreira
E foi EXATAMENTE por isso que eu criei um curso de Node.js e React chamado CrazyStack. A minha maior necessidade no início da carreira era alguém que me ensinasse um projeto prático onde eu pudesse não só desenvolver minhas habilidades de dev como também lançar algo pronto para entrar no ar no dia seguinte.
Sabe qual era minha maior frustração? Aplicar conhecimentos teóricos em projetos práticos e reais, mas não encontrar ninguém que me ensinasse COMO fazer isso na prática! Era exatamente a mesma frustração que você deve sentir: acumular informação sem saber como implementar na prática.
Assim como você precisa de estratégias claras e implementação prática para ter sucesso, todo desenvolvedor precisa de um projeto estruturado para sair do teórico e partir para a execução. É como ter todas as peças do quebra-cabeça mas não saber como montá-las - você pode ter conhecimento técnico, mas sem um projeto completo, fica difícil transformar esse conhecimento em resultados concretos.
No CrazyStack, você constrói um SaaS completo do zero - backend robusto em Node.js, frontend moderno em React, autenticação, pagamentos, deploy, tudo funcionando. É o projeto que eu queria ter quando comecei: algo que você termina e pode colocar no ar no mesmo dia, começar a validar com usuários reais e até monetizar.