TanStack
TanStack

DB

beta

Take the network off the interaction path.

DB turns API data into typed collections, runs live relational queries over them, and applies optimistic writes immediately while persistence catches up.

Docs
live todo collection

collection

3 records

live query

2 open

transaction

ready

persist on your cadence

debounce路throttle路queue

useLiveQuery(openTodos)

ready
open tasksync state
Ship invite flowsynced
Review pricing copysynced

The live result changes immediately. Persistence either confirms the local state or removes it automatically when the handler fails.

10.9Mtotal downloads886,747weekly downloads3,826GitHub stars

A third path

Stop choosing between endpoint sprawl and loading everything.

Normalized collections keep the backend shape simple. Components can ask a fast local query engine for the exact joined, filtered, and aggregated view they need.

01

Endpoint per screen

The backend inherits every view and relationship the product invents.

02

Load everything

The browser receives broad payloads and repeatedly recomputes derived views.

03

Collections + live queries

Keep normalized records locally and ask for each view as a reactive query.

cross-collection live query
from issues
join projects on projectId
where status = open
ISS-42Stream activity feedDashboard 路 high
ISS-51Shorten invite flowOnboarding 路 medium
ISS-58Reconcile invoicesBilling 路 high

3 results 路 inferred output

Live relational queries

Describe the view. DB keeps the result current.

Queries can filter, project, join, include, order, group, and aggregate across collections. Differential dataflow updates affected results incrementally as the underlying records change.

On-demand sync

The component query can shape the request.

With on-demand sync, predicates, ordering, limits, and offsets can reach the collection loader. Translate them into API parameters and load only the subset active views require.

query-driven sync

  1. active query

    team = platform 路 limit 20

  2. load subset

    ctx.meta.loadSubsetOptions

  3. API request

    GET /issues?team=platform&limit=20

Brownfield by design

Adopt collections without replacing the backend.

Start from the data source already in production. Components use the same live-query model whether records arrive through TanStack Query, an API, local persistence, or a sync engine.

TanStack Query

queryCollectionOptions()

Keep the Query client and materialize fetched rows into a collection.

REST or GraphQL

collection handlers

Load records and persist mutations through the API you already own.

Sync engine

collection adapter

Use Electric, PowerSync, RxDB, TrailBase, or a custom collection creator.

same collection 路 same live query