Como criar estado reativo com TanStack DB sem
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
Como criar estado reativo com TanStack DB sem. Passo a passo como configurar coleções e queries sincronizadas com TanStack DB e torne sua aplicação mais performática.
O que é TanStack DB?
TanStack DB não é ORM. É gerenciador de estado que trabalha com coleções reativas. Conecta com API, banco SQL via stream, localStorage ou só memória. Pense nele como Redux que entende SQL e sincroniza automaticamente.
Atenção
TanStack DB não substitui Prisma. Use Prisma no backend para persistência. TanStack DB no frontend para estado reativo. Ferramentas diferentes, propósitos diferentes.
Coleções no TanStack DB
Coleção é array tipado com Zod que pode vir de qualquer lugar. Memória, localStorage, API via TanStack Query ou Postgres com ElectricSQL. Você define o schema e conecta a fonte.
- Passo 1: Crie o schema com Zod para a coleção.
- Passo 2: Registre a coleção no TanStack DB.
- Passo 3: Informe a fonte (API, SQL ou local).
Dica técnica
TanStack DB + ElectricSQL = Firebase com Postgres. Reatividade em tempo real, mas você mantém SQL e relacionamentos. Melhor dos dois mundos.
Stream de dados em tempo real
Backend envia updates via stream HTTP ou WebSocket. Frontend escuta, recebe dado novo e insere na coleção. Automático. Componentes que usam aquela coleção re-renderizam sozinhos.
Boas práticas
Sempre use collection.insert() para adicionar dados. Valida o schema com Zod e dispara os triggers que atualizam todas as queries ativas. Pule isso e perde reatividade.
Queries com useLiveQuery
useLiveQuery é como fazer SELECT no banco, mas reativo. Query retorna dados atuais e se atualiza automaticamente quando a coleção muda. Declarativo igual useState, mas com SQL.
Cuidado
Query que usa variável externa precisa listar ela nas dependências, igual useEffect. Esqueceu? Query não atualiza quando a variável muda. Bug clássico.
Exemplo prático com chat
Chat é showcase perfeito. Mensagem enviada vai pro backend, salva no banco, streama pros clientes conectados. Cliente insere na coleção local, useLiveQuery atualiza a tela. Tempo real sem esforço.
Importante
Coleção de mensagens vindo de Postgres, coleção de usuários de API REST. Faz JOIN entre as duas no useLiveQuery. TanStack resolve tudo no frontend.
Pesquisa em tempo real
Busca com LIKE case-insensitive no TanStack DB. Funciona, mas precisa do termo nas dependências. Senão digita na caixa de busca e nada acontece.
- Passo 1: Crie a função da query parametrizada com o termo de
busca. - Passo 2: Declare a função dentro do hook useLiveQuery com
[termo] como dependência. - Passo 3: Atualize o estado conforme o usuário digita e
visualize resultado em tempo real.
Aplicações em casos reais
Apps colaborativos, dashboards ao vivo, chats — tudo que precisa de update instantâneo. E quando você precisa fazer JOIN no frontend sem complicar com GraphQL.
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
- Criação de schemas com Zod e registro das coleções
- Leitura de mensagens com useLiveQuery
- Integração com API + stream de updates
- Inserção reativa no client
- Busca eficiente com LIKE insensível a caso
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.