Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 39 additions & 6 deletions docs/collections/rxdb-collection.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@ The `@tanstack/rxdb-db-collection` package allows you to create collections that
- Leverage RxDB's [replication plugins](https://rxdb.info/replication.html) to sync with CouchDB, MongoDB, Supabase, REST APIs, GraphQL, WebRTC (P2P) and more.


## 1. Installation
### 1. Installation

Install the RXDB collection packages along with your preferred framework integration.
Install the RxDB collection packages along with your preferred framework integration.

```bash
npm install @tanstack/rxdb-db-collection rxdb @tanstack/react-db
Expand All @@ -35,8 +35,8 @@ npm install @tanstack/rxdb-db-collection rxdb @tanstack/react-db
import { createRxDatabase, addRxPlugin } from 'rxdb/plugins/core'

/**
* Here we use the localstorage based storage for RxDB.
* RxDB has a wide range of storages based on Dexie.js, IndexedDB, SQLite and more.
* Here we use the localStorage based storage for RxDB.
* RxDB has a wide range of storages based on Dexie.js, IndexedDB, SQLite, and more.
*/
import { getRxStorageLocalstorage } from 'rxdb/plugins/storage-localstorage'

Expand Down Expand Up @@ -93,7 +93,7 @@ import { rxdbCollectionOptions } from '@tanstack/rxdb-db-collection'

const todosCollection = createCollection(
rxdbCollectionOptions({
rxCollection: myDatabase.todos,
rxCollection: db.todos,
startSync: true, // start ingesting RxDB data immediately
})
)
Expand All @@ -118,7 +118,7 @@ The `rxdbCollectionOptions` function accepts the following options:
### Optional

- `id`: Unique identifier for the collection
- `schema`: Schema for validating items. RxDB already has schema validation but having additional validation on the TanStack DB side can help to unify error handling between different tanstack collections.
- `schema`: Schema for validating items. RxDB already has schema validation but having additional validation on the TanStack DB side can help to unify error handling between different TanStack collections.
- `startSync`: Whether to start syncing immediately (default: true)
- `onInsert, onUpdate, onDelete`: Override default persistence handlers. By default, TanStack DB writes are persisted to RxDB using bulkUpsert, patch, and bulkRemove.
- `syncBatchSize`: The maximum number of documents fetched per batch during the initial sync from RxDB into TanStack DB (default: 1000). Larger values reduce round trips but use more memory; smaller values are lighter but may increase query calls. Note that this only affects the initial sync. Ongoing live updates are streamed one by one via RxDB's change feed.
Expand All @@ -132,3 +132,36 @@ Replication and sync in RxDB run independently of TanStack DB. You set up replic
When replication runs, it pulls and pushes changes to the backend and applies them to the RxDB collection. Since the TanStack DB integration subscribes to the RxDB change stream, any changes applied by replication are automatically reflected in your TanStack DB collection.

This separation of concerns means you configure replication entirely in RxDB, and TanStack DB automatically benefits: your TanStack collections always stay up to date with whatever sync strategy you choose.


## FAQ

### Do I still need RxDB schema indexes if I only query TanStack DB?

Usually not, at least for TanStack DB queries themselves. TanStack DB queries run entirely in memory, so RxDB schema indexes do not affect the performance of TanStack DB's live queries. However, RxDB indexes may still be important if:
- You run queries directly against RxDB (e.g. `rxCollection.find(...)`).
- Your replication setup uses filtered queries or selectors.
- You rely on RxDB to selectively load subsets of data instead of hydrating everything into memory.

### Is data duplicated between RxDB and TanStack DB?

Yes, intentionally. RxDB stores data durably on disk. TanStack DB stores data in memory for fast queries and reactivity. This duplication enables high-performance UI queries while retaining [local-first](https://rxdb.info/articles/local-first-future.html) persistence and sync.

### How does backend ↔ RxDB ↔ TanStack DB synchronization work?

Synchronization follows a clear separation of responsibilities between RxDB and TanStack DB.

**RxDB** is responsible for persistence and networking. It stores data durably using a local storage engine (IndexedDB, SQLite, etc.) and handles all replication logic. Replication is configured directly on the RxDB collection and runs independently of TanStack DB. RxDB pulls changes from the backend, applies them locally, resolves conflicts, and pushes local changes back to the backend.

**TanStack DB** sits on top as an in-memory, reactive query layer. It does not talk to the backend directly and does not participate in replication. Instead, it mirrors the current state of the RxDB collection in memory and provides fast live queries and optimistic mutations for the UI.

This design intentionally forms two independent loops:
- A durability and sync loop managed entirely by RxDB (backend to RxDB).
- A reactive UI loop managed by TanStack DB (RxDB change stream to in-memory collections to live queries).

## Learn More

- [RxDB Documentation](https://rxdb.info/overview.html)
- [RxDB Sync Engine](https://rxdb.info/replication.html)
- [Tanstack DB Live Queries](https://tanstack.com/db/latest/docs/guides/live-queries)

Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
---
id: rxdbCollectionOptions
title: rxdbCollectionOptions
---

# Function: rxdbCollectionOptions()

## Call Signature

```ts
function rxdbCollectionOptions<T>(config): CollectionConfig<InferSchemaOutput<T>, string, T, UtilsRecord> & object;
```

Defined in: [rxdb.ts:89](https://github.com/pubkey/tanstack-db-rxdb/blob/main/packages/rxdb-db-collection/src/rxdb.ts#L89)

Creates RxDB collection options for use with a standard Collection

### Type Parameters

#### T

`T` *extends* `StandardSchemaV1`\<`unknown`, `unknown`\>

### Parameters

#### config

[`RxDBCollectionConfig`](../type-aliases/RxDBCollectionConfig.md)\<`InferSchemaOutput`\<`T`\>, `T`\>

Configuration options for the RxDB collection

### Returns

`CollectionConfig`\<`InferSchemaOutput`\<`T`\>, `string`, `T`, `UtilsRecord`\> & `object`

Collection options with utilities

## Call Signature

```ts
function rxdbCollectionOptions<T>(config): CollectionConfig<T, string, never, UtilsRecord> & object;
```

Defined in: [rxdb.ts:96](https://github.com/pubkey/tanstack-db-rxdb/blob/main/packages/rxdb-db-collection/src/rxdb.ts#L96)

Creates RxDB collection options for use with a standard Collection

### Type Parameters

#### T

`T` *extends* `object`

### Parameters

#### config

`Omit`\<`BaseCollectionConfig`\<`T`, `string`, `never`, `UtilsRecord`, `any`\>, `"onInsert"` \| `"onUpdate"` \| `"onDelete"` \| `"getKey"`\> & `object` & `object`

Configuration options for the RxDB collection

### Returns

`CollectionConfig`\<`T`, `string`, `never`, `UtilsRecord`\> & `object`

Collection options with utilities
28 changes: 28 additions & 0 deletions docs/reference/rxdb-db-collection/functions/stripRxdbFields.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
id: stripRxdbFields
title: stripRxdbFields
---

# Function: stripRxdbFields()

```ts
function stripRxdbFields<T>(obj): T;
```

Defined in: [helper.ts:8](https://github.com/pubkey/tanstack-db-rxdb/blob/main/packages/rxdb-db-collection/src/helper.ts#L8)

## Type Parameters

### T

`T` *extends* `Record`\<`string`, `unknown`\>

## Parameters

### obj

`T`

## Returns

`T`
19 changes: 19 additions & 0 deletions docs/reference/rxdb-db-collection/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
id: "@tanstack/rxdb-db-collection"
title: "@tanstack/rxdb-db-collection"
---

# @tanstack/rxdb-db-collection

## Type Aliases

- [RxDBCollectionConfig](type-aliases/RxDBCollectionConfig.md)

## Variables

- [OPEN\_RXDB\_SUBSCRIPTIONS](variables/OPEN_RXDB_SUBSCRIPTIONS.md)

## Functions

- [rxdbCollectionOptions](functions/rxdbCollectionOptions.md)
- [stripRxdbFields](functions/stripRxdbFields.md)
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
---
id: RxDBCollectionConfig
title: RxDBCollectionConfig
---

# Type Alias: RxDBCollectionConfig\<T, TSchema\>

```ts
type RxDBCollectionConfig<T, TSchema> = Omit<BaseCollectionConfig<T, string, TSchema>, "onInsert" | "onUpdate" | "onDelete" | "getKey"> & object;
```

Defined in: [rxdb.ts:49](https://github.com/pubkey/tanstack-db-rxdb/blob/main/packages/rxdb-db-collection/src/rxdb.ts#L49)

Configuration interface for RxDB collection options

## Type Declaration

### rxCollection

```ts
rxCollection: RxCollection<T, unknown, unknown, unknown>;
```

The RxCollection from a RxDB Database instance.

### syncBatchSize?

```ts
optional syncBatchSize: number;
```

The maximum number of documents to read from the RxDB collection
in a single batch during the initial sync between RxDB and the
in-memory TanStack DB collection.

#### Remarks

- Defaults to `1000` if not specified.
- Larger values reduce the number of round trips to the storage
engine but increase memory usage per batch.
- Smaller values may lower memory usage and allow earlier
streaming of initial results, at the cost of more query calls.

Adjust this depending on your expected collection size and
performance characteristics of the chosen RxDB storage adapter.

## Type Parameters

### T

`T` *extends* `object` = `Record`\<`string`, `unknown`\>

The explicit type of items in the collection (highest priority). Use the document type of your RxCollection here.

### TSchema

`TSchema` *extends* `StandardSchemaV1` = `never`

The schema type for validation and type inference (second priority)

## Remarks

Type resolution follows a priority order:
1. If you provide an explicit type via generic parameter, it will be used
2. If no explicit type is provided but a schema is, the schema's output type will be inferred

You should provide EITHER an explicit type OR a schema, but not both, as they would conflict.
Notice that primary keys in RxDB must always be a string.
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
id: OPEN_RXDB_SUBSCRIPTIONS
title: OPEN_RXDB_SUBSCRIPTIONS
---

# Variable: OPEN\_RXDB\_SUBSCRIPTIONS

```ts
const OPEN_RXDB_SUBSCRIPTIONS: WeakMap<RxCollection, Set<Subscription>>;
```

Defined in: [rxdb.ts:31](https://github.com/pubkey/tanstack-db-rxdb/blob/main/packages/rxdb-db-collection/src/rxdb.ts#L31)

Used in tests to ensure proper cleanup
12 changes: 12 additions & 0 deletions scripts/generate-docs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,18 @@ await generateReferenceDocs({
),
exclude: [`packages/db/**/*`],
},
{
name: `rxdb-db-collection`,
entryPoints: [
resolve(__dirname, `../packages/rxdb-db-collection/src/index.ts`),
],
tsconfig: resolve(
__dirname,
`../packages/rxdb-db-collection/tsconfig.docs.json`,
),
outputDir: resolve(__dirname, `../docs/reference/rxdb-db-collection`),
exclude: [`packages/db/**/*`],
},
{
name: `react-db`,
entryPoints: [resolve(__dirname, `../packages/react-db/src/index.ts`)],
Expand Down
Loading