TanStack DB: coleções sincronizadas, não ORM — guia prático
TanStack DB não é Prisma/Drizzle: é modelo de estado com coleções sincronizadas e queries estilo live SQL — o que isso muda no client.
Resposta direta
Se você esperava ORM, recalibre: TanStack DB pensa em coleções sync + query reativa, não em mapear tabelas como Prisma. Eu posso só inserir na coleção de mensagens alguns mensagens para começar e quando eu vou para o meu stream a primeira coisa que eu faço é enviar todos os mensagens existentes ao cliente e então eu faço mudanças de subscrever naquela.
O que TanStack DB não é
Então, a nova biblioteca de TANSTACK DB não é uma ORIM, ou um sistema de gestão relacional de objetos, como um Prisma ou Drizzle. O que é, é um modelo de gestão de estado baseado em coletões sincronizadas e essas queries de estilo FastLiveSQL dessas coletões. E essas coletões podem ser abrigadas por um database, através de um API, ou através de uma conexão live para um database de Postgres através de um SQL elétrico, ou.
Vou mostrar a vocês esses dois conceitos principais, coletivas e queries, e vamos usar uma abordagem DIY para isso, para que vocês entendam os fundamentos dela e como ela se configuraria em sua app. Tipo de pessoa prática e este é um tipo de canal prático, então vamos usar começar a demonstrar o db e é legal porque a app de criar começar que eu construí tem uma demo de db construída direto nela, então vamos tentar isso tudo bem, então, tendo feito a app de criar começar no final, preciso dar um nome para minha a app, chamaremos-a de minha chat a parte importante aqui é selecionar db para o TAN Stack DB. Há uma coleção de query do TanStack que se conecta à query do TanStack e então a data que volta da query do TanStack é colocada na coleção e você pode fazer uma refeição contínua nisso se quiser.
Coleções sincronizadas como unidade
E também há essas coleções de SQL eléctricas que se conectam a uma instância de SQL eletrônica que fica em cima de Postgres, assiste a instância de Postgres para qualquer mudança e então envia esses eventos para a UI para que você tenha aquele sentimento que é como um Firebase ou um convexo de um database real-time. Na verdade, é realmente legal e eu vou mostrar em um pouco, mas é realmente importante entender que temos esse pedaço fundamental aqui da coleção de mensagens. Ele toma uma URL, então, neste caso, nossa URL é demo-db-chat-api, e essa é nossa pequena API de chat.
Essa ficha é um get daquela URL, mas a resposta é na verdade um stream, então vamos a gente vai conseguir um líder disso que vai conseguir esse fluxo contínuo. Isso tudo é tratado aqui nesta seção, como decodamos esse stream vindo, dividimos em pedaços e depois usamos collection.insert e esse pedaço tem a mesma esquema do ID, do texto e do usuário. Para enviar uma mensagem nova para o chat, We just post to that same API endpoint.
Na prática
Se você esperava ORM, recalibre: TanStack DB pensa em coleções sync + query reativa, não em mapear tabelas como Prisma.
Queries estilo live SQL
E em previsão do que vamos falar em pouco tempo sobre as queries, para conseguir as mensagens daquela coleção, usamos um novo hook chamado UseLiveQuery. Nós obtemos isso do TAN Stack ReactDB e é muito importante entender que esta biblioteca DB, como todas as bibliotecas do TAN Stack, não é ligada ao React. Há um core, o core do TAN Stack DB que lidar com coleções e queries, mas é agnóstico para qualquer tipo de framework.
E aí há implementações como o TanStack ReactDB aqui que conectam isso para o framework de sua escolha. Neste caso, está nos dando um ponto de volta para a Query Used Live e o que a Query Used Live faz é que se inscreve nesta Query que criamos onde trazemos a coleção de mensagens e então selecionamos todas essas mensagens. Mas antes de começarmos a entrar mais profundamente em coleções e Queries Live e eu vou mostrar como adicionar um pouco de código, vamos falar sobre o patrocinador de hoje e é o Infinite Red.
Fontes: DB, API ou outra coleção
Quando você está procurando serviços de consultoria em relação ao React Native, não há realmente nenhuma empresa melhor para trabalhar com do que o React Native. Estou dizendo, quando eu tenho perguntas sobre o React Native, esses são os caras que eu vou para. Eles também fazem um trabalho fantástico em Open Source com o seu framework Ignite, que tem toda a funcionalidade que você vai precisar para começar uma aplicação real de React Native.
Aqui na fonte dbchatapi.ts, nas rotas, é aqui que definimos a rota de server de demo dbchatapi, e é aí que ela se conecta. Tem dois métodos aqui, um é get, que retorna o stream lê-ponível, e o post-metodo que traz o novo mensagem, e o que ele faz? Eu posso só inserir na coleção de mensagens alguns mensagens para começar e quando eu vou para o meu stream a primeira coisa que eu faço é enviar todos os mensagens existentes ao cliente e então eu faço mudanças de subscrever naquela coleção então é apenas um método genérico que diz, hey, qualquer vez que aquela coleção de mensagens muda eu quero ser notificado sobre isso me diga quais são as mudanças e então eu vou através das mudanças e eu vou ver neste caso se há alguma inserção e no meio da.
Quando adotar vs ficar no React Query puro
Eu posso adicionar no insert, no update e no delete e eu posso atualizar um arquivo local que tem todas as mensagens persistentes se eu quiser fazer isso. Ou, claro, eu poderia usar qualquer uma dessas coleções criadas para ir e conectar para databases e fazer todo esse tipo de trabalho, então você realmente tem a opção aqui de administrar cada coleção da maneira que você quiser, na verdade, você pode na verdade, ter diferentes coleções falando de diferentes fontes de dados e você pode até usar o mecanismo de query do estilo sql para juntar isso se você quiser então vamos falar sobre as queries, então a primeira query que temos é esta messages hook that uses this use live query hook E esse hook de query usa uma função, ele recebe uma query e você então, meio que população da query. Então, como em uma declaração de SQL, a primeira coisa que você vai fazer é fazer um FROM, e você vai dizer, quais são as minhas fontes de dados?
Nesse caso, vamos dizer que vamos ir para a coletão de mensagens e tirar cada mensagem e colocar em uma chave de mensagem. USE CHAT é uma coisa que começa com o EFFECT USE, que se conecta ao stream, que insere os registros quando eles vêm do stream para aquela coleção. E então, enviar mensagem que posta para o server e então usar mensagens, que é aquela query live que se coloca em cima de mensagens.
Sinais de que está funcionando
Então, quando eu mando um mensagem do cliente, eu posto para o endpoints do API. Esse endpoints do API tem sua própria coleção que ele então insere. O cliente então pega isso, insere essa data na coleção do lado do cliente, que é pegada por mensagens usadas e a query de mensagem usada me dá de volta as mensagens e aí você tem um site completo de viagens, mas aqui, veja isso, se eu já for e trazer isso para duas diferentes janelas, então eu tenho Microsoft Edge aqui e Chrome aqui e eu escrevo uma nova mensagem de Alice, boom, aparece em ambos os lugares e eu tive que fazer zero codificação por aqui, é apenas que esse Pub Sub e esse ciclo de stream está funcionando em ambos esses clientes e isso funciona naturalmente Para enfatizar mais e mostrar algumas habilidades de query, vamos criar um panel de pesquisa ao redor do chat DB.
Vou chamá-lo de useSearch e vai levar o termo de pesquisa e vamos copiar e pastar isso e isso nos dará todos os mensagens e então queremos criar um clause de onde e essa clause de onde vai levar um mensagem e então vamos fazer um like insensível de caso ou um like de eu naquele texto de mensagem com aquele termo. Como eu disse, o TAN Stack DB é onde tudo o seu stuff não-framework específico vai entrar, então nós trazemos isso do TAN Stack DB. Certo, então agora temos o nosso search us, então vamos construir um componente em torno disso, então vamos fazer um novo componente chamado chat search, onde vamos trazer aquele hook de search us que eu acabei de criar que run esse like search e então criaremos um novo componente chamado chat search que apenas tem algum estado para o termo de busca e então usa o search us para pegar aquele termo e nos dá as mensagens que se adequam a esse termo.
O que evitar na primeira semana
Então, o que ele faz é que ele reúne essa função de construção de arquivo uma vez e diz, bem, nada mudou, então eu vou só usar aquela versão compilada de novo e de novo. Se eu for adicionar outra coisa aqui, como, de novo, isso é muito legal, enviar, essa mensagem simplesmente aparece automaticamente na busca, e eu não tive que fazer nenhum código de sincronização entre essas coisas. Então, é por isso que eu estou pensando que este é um novo estilo de gestão de estado do cliente.
Para pensar em como gerir dados, então não quero que você se esqueça de pensar que a memória em memória é a única maneira de usar essa coisa de db como eu digo há coletões de query da Tansac, mas também há essa coisa de SQL elétrica e eu acho que é realmente valioso dar uma olhada, então eu coloquei o exemplo de reato para fazer do repo da Tansac db estou atirando agora, então está realmente correndo um instante docker que está trazendo um trailblaze não sei o que é, mas também o postgres Bom, deve-se E Electric, que é o que monitora o Postgres e envia eventos quando a instância do Postgres muda. Tudo que eu estou fazendo aqui fora do cliente é que eu estou apenas adicionando um item para o database e automaticamente recebendo aquele refresh de volta para o cliente. Então, se você está procurando esse sentimento real-time, à la Firebase ou Convex, aqui é uma opção usando Electric SQL, obviamente, essa coisa Trailblaze, ou você pode fazer a coisa do intervalo de refetchamento do TANstack.
Na prática
Próximo passo para «tanstack-db-colecoes-sincronizadas»: rode um experimento de 7 dias com uma métrica ligada a tanstack db colecoes sincronizadas antes de escalar o padrão.
Perguntas frequentes
Qual leitura útil de «Coleções sincronizadas como unidade» em TanStack DB: coleções sincronizadas, não ORM — guia prático?
Extraia só o mecanismo de «Coleções sincronizadas como unidade»: E também há essas coleções de SQL eléctricas que se conectam a uma instância de SQL eletrônica que fica em cima de Postgres, assiste a instância de Postgres para qualquer mudança e então envia esses eventos para a UI para que você tenha aquele sentimento que é.
Como operacionalizar «Queries estilo live SQL» sem overbuild?
Checklist mental: E em previsão do que vamos falar em pouco tempo sobre as queries, para conseguir as mensagens daquela coleção, usamos um novo hook chamado UseLiveQuery. Nós obtemos isso do TAN Stack ReactDB e é muito importante entender que esta biblioteca DB, como todas as. Depois revise se o resultado aparece sem você na call.
Que evidência confirma «Fontes: DB, API ou outra coleção» no caminho certo?
Do texto: Quando você está procurando serviços de consultoria em relação ao React Native, não há realmente nenhuma empresa melhor para trabalhar com do que o React Native. Estou dizendo, quando eu tenho perguntas sobre o React Native, esses são os caras que eu vou para.
Qual armadilha «Quando adotar vs ficar no React Query puro» tenta evitar?
No recorte «Quando adotar vs ficar no React Query puro»: Eu posso adicionar no insert, no update e no delete e eu posso atualizar um arquivo local que tem todas as mensagens persistentes se eu quiser fazer isso. Ou, claro, eu poderia usar qualquer uma dessas coleções criadas para ir e conectar para databases e fazer.