Description
TanStack DB core concepts: createCollection with queryCollectionOptions, electricCollectionOptions, powerSyncCollectionOptions, rxdbCollectionOptions, trailbaseCollectionOptions, localOnlyCollectionOptions. Live queries via query builder (from, where, join, select, groupBy, orderBy, limit). Optimistic mutations with draft proxy (collection.insert, collection.update, collection.delete). createOptimisticAction, createTransaction, createPacedMutations. Entry point for all TanStack DB skills.
SKILL.md
TanStack DB — Core Concepts
TanStack DB is a reactive client-side data store. It loads data into typed collections from any backend (REST APIs, sync engines, local storage), provides sub-millisecond live queries via differential dataflow, and supports instant optimistic mutations with automatic rollback.
Framework packages (@tanstack/react-db, @tanstack/vue-db, @tanstack/svelte-db,
@tanstack/solid-db) re-export everything from @tanstack/db plus framework-specific
hooks. In framework projects, import from the framework package directly.
@tanstack/angular-db is the exception -- import operators from @tanstack/db separately.
Sub-Skills
| Need to... | Read |
|---|---|
| Create a collection, pick an adapter, add schema | db-core/collection-setup/SKILL.md |
| Query data with where, join, groupBy, select | db-core/live-queries/SKILL.md |
| Insert, update, delete with optimistic UI | db-core/mutations-optimistic/SKILL.md |
| Build a custom sync adapter | db-core/custom-adapter/SKILL.md |
| Persist collections to SQLite (offline cache) | db-core/persistence/SKILL.md |
| Preload collections in route loaders | meta-framework/SKILL.md |
| Add offline transaction queueing | offline/SKILL.md (in @tanstack/offline-transactions) |
For framework-specific hooks:
| Framework | Read |
|---|---|
| React | react-db/SKILL.md |
| Vue | vue-db/SKILL.md |
| Svelte | svelte-db/SKILL.md |
| Solid | solid-db/SKILL.md |
| Angular | angular-db/SKILL.md |
Quick Decision Tree
- Setting up for the first time? → db-core/collection-setup
- Building queries on collection data? → db-core/live-queries
- Writing data / handling optimistic state? → db-core/mutations-optimistic
- Using React hooks? → react-db
- Preloading in route loaders (Start, Next, Remix)? → meta-framework
- Building an adapter for a new backend? → db-core/custom-adapter
- Persisting collections to SQLite? → db-core/persistence
- Need offline transaction persistence? → offline
Version
Targets @tanstack/db v0.6.0.
More skills from the db repository
View all 13 skillsangular-db
integrate TanStack DB with Angular
Jul 16AngularDatabaseTypeScriptdb-core/collection-setup
set up typed collections in TanStack DB
Jul 26Data ModelingDatabaseTanStackdb-core/custom-adapter
build custom TanStack collection adapters
Jul 16DatabaseEngineeringTanStackdb-core/live-queries
build live queries with TanStack DB
Jul 16DatabaseSQLTanStackdb-core/mutations-optimistic
manage optimistic mutations in TanStack DB
Jul 26DatabaseFrontendTanStackdb-core/persistence
implement SQLite-backed persistence for TanStack DB
Jul 17DatabasePersistenceSQLiteTanStack
More from TanStack
View publisheraggregation
perform data aggregation in TanStack Table
table
Jul 26Data AnalysisFrontendTanStackapi-not-found
diagnose TanStack Table API errors
table
Jul 26DebuggingFrontendTanStackcell-selection
select rectangular cell ranges in tables
table
Jul 26Data AnalysisTanStackUI Componentsclient-vs-server
manage TanStack Table data pipelines
table
Jul 26Data PipelineFrontendPerformanceTanStackcolumn-faceting
build faceted filter UIs
table
Jul 26Data VisualizationFrontendTanStackcolumn-filtering
implement column filtering in TanStack Table
table
Jul 26Data AnalysisFrontendTanStack