TanStack DB Enters Beta with Reactive Queries, Optimistic Mutations, and Local-First Sync

Write for InfoQ

TanStack, the team behind TanStack Query, has announced the beta release of TanStack DB, an embedded client-side database designed to bring reactive queries, transactional mutations, and real-time sync to frontend applications. The library is built on top of TanStack Query and aims to simplify complex state management and caching in modern web apps.

TanStack DB introduces several new capabilities, including typed collections, live queries, and transactional mutators. Collections act as normalized stores of records, while live queries allow developers to subscribe to results that update incrementally as underlying data changes. Unlike traditional re-runs of queries, TanStack DB uses a differential dataflow engine to recalculate only the parts of a query affected by a change, leading to sub-millisecond query updates even for complex joins.

One of the headline features is support for optimistic mutations. Developers can apply changes locally and immediately reflect them in the UI, while TanStack DB handles syncing and rollbacks in the background. This approach builds on patterns in TanStack Query but aims to make them more reliable.

Collections, Live Queries and and Mutations can be used in a format similar to existing users of TanStack Query, with examples in the documentation:

const todoCollection = createCollection({
 // ...config
 onUpdate: updateMutationFn,
})
const { data: todos } = useLiveQuery((q) =>
 q.from({ todo: todoCollection }).where(({ todo }) => todo.completed)
)
const complete = (todo) => {
 todoCollection.update(todo.id, (draft) => {
 draft.completed = true
 })
}

TanStack DB also places emphasis on backend-agnostic sync. Data can be loaded or synchronized from REST, GraphQL, polling APIs, or real-time sync providers such as ElectricSQL. This enables local-first workflows where large datasets can be preloaded and kept in sync without introducing custom state management layers or manual reconciliation logic.

Early feedback from the developer community has highlighted both excitement and caution. On r/reactjs, one developer commented:

Looks promising but still rough. I wouldn't bet my app on the Beta.

On Hacker News, there is some excitement, commenting that current implementations are difficult to work with:

Very excited for this. Current client-side DB implementations are hard to work with. Will it support IndexedDB?

In a longer write-up, Shayan from Medium argued that TanStack DB addresses long-standing issues with optimistic updates in frontend frameworks:

Optimistic updates using just TanStack Query? Let's be honest, they kind of suck… TanStack DB extends TanStack Query with collections, live queries, and optimistic mutations to keep the UI reactive, consistent, and blazing fast.

TanStack DB is still in beta, and the maintainers caution that it should be considered experimental for now. However, its incremental adoption model allows developers to integrate it gradually into existing TanStack Query applications, and adapters are already available for React, Vue, Solid, Svelte or VanillaJS.

TanStack DB is open source and available on npm. Documentation, examples, and guides are provided on the official site.

Related Topics:

• Development
• Data
• Database
• Query
• Web Development

We protect your privacy.