feat(examples): Electron offline-first todo app with SQLite persistence by kevin-dp · Pull Request #1345 · TanStack/db

kevin-dp · 2026-03-09T15:18:41Z

Summary

Adds a complete Electron example app demonstrating offline-first architecture with TanStack DB
Uses SQLite persistence for both collection data and the offline transaction outbox (via a custom ElectronSQLiteStorageAdapter)
Server state persisted to JSON file so data survives pnpm dev restarts
Includes fetchWithRetry for resilient network calls with exponential backoff
Reset button to clear all state (server, SQLite, outbox) and DevTools menu for testing
Handles React StrictMode double-mount issue that leaves ghost Web Locks blocking leader election

Test plan

cd examples/electron/offline-first && pnpm install && pnpm dev
Add todos, quit the app, reopen — todos persist (SQLite + server JSON)
Stop and restart pnpm dev — todos still there
Open DevTools (Cmd+Shift+I), set Network to Offline, add todos — they appear with "Offline Mode" badge and pending count
Go back online — pending mutations sync to server
Add todos while offline, close app, reopen — offline mutations are replayed and synced
Click Reset — everything cleared, app shows empty state
Open two windows (Cmd+N), verify cross-window sync

🤖 Generated with Claude Code

changeset-bot · 2026-03-09T15:18:49Z

⚠️ No Changeset found

Latest commit: d78ea23

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

pkg-pr-new · 2026-03-09T15:25:09Z

More templates

@tanstack/angular-db

npm i https://pkg.pr.new/TanStack/db/@tanstack/angular-db@1345

@tanstack/db

npm i https://pkg.pr.new/TanStack/db/@tanstack/db@1345

@tanstack/db-browser-wa-sqlite-persisted-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-browser-wa-sqlite-persisted-collection@1345

@tanstack/db-cloudflare-do-sqlite-persisted-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-cloudflare-do-sqlite-persisted-collection@1345

@tanstack/db-electron-sqlite-persisted-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-electron-sqlite-persisted-collection@1345

@tanstack/db-ivm

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-ivm@1345

@tanstack/db-node-sqlite-persisted-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-node-sqlite-persisted-collection@1345

@tanstack/db-react-native-sqlite-persisted-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-react-native-sqlite-persisted-collection@1345

@tanstack/db-sqlite-persisted-collection-core

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-sqlite-persisted-collection-core@1345

@tanstack/electric-db-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/electric-db-collection@1345

@tanstack/offline-transactions

npm i https://pkg.pr.new/TanStack/db/@tanstack/offline-transactions@1345

@tanstack/powersync-db-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/powersync-db-collection@1345

@tanstack/query-db-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/query-db-collection@1345

@tanstack/react-db

npm i https://pkg.pr.new/TanStack/db/@tanstack/react-db@1345

@tanstack/rxdb-db-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/rxdb-db-collection@1345

@tanstack/solid-db

npm i https://pkg.pr.new/TanStack/db/@tanstack/solid-db@1345

@tanstack/svelte-db

npm i https://pkg.pr.new/TanStack/db/@tanstack/svelte-db@1345

@tanstack/trailbase-db-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/trailbase-db-collection@1345

@tanstack/vue-db

npm i https://pkg.pr.new/TanStack/db/@tanstack/vue-db@1345

commit: bf95f0a

github-actions · 2026-03-09T15:25:47Z

Size Change: 0 B

Total Size: 94.6 kB

ℹ️ View Unchanged

Filename	Size
`./packages/db/dist/esm/collection/change-events.js`	1.39 kB
`./packages/db/dist/esm/collection/changes.js`	1.22 kB
`./packages/db/dist/esm/collection/events.js`	434 B
`./packages/db/dist/esm/collection/index.js`	3.56 kB
`./packages/db/dist/esm/collection/indexes.js`	2.35 kB
`./packages/db/dist/esm/collection/lifecycle.js`	1.75 kB
`./packages/db/dist/esm/collection/mutations.js`	2.34 kB
`./packages/db/dist/esm/collection/state.js`	3.49 kB
`./packages/db/dist/esm/collection/subscription.js`	3.71 kB
`./packages/db/dist/esm/collection/sync.js`	2.41 kB
`./packages/db/dist/esm/deferred.js`	207 B
`./packages/db/dist/esm/errors.js`	4.7 kB
`./packages/db/dist/esm/event-emitter.js`	748 B
`./packages/db/dist/esm/index.js`	2.77 kB
`./packages/db/dist/esm/indexes/auto-index.js`	742 B
`./packages/db/dist/esm/indexes/base-index.js`	766 B
`./packages/db/dist/esm/indexes/btree-index.js`	2.17 kB
`./packages/db/dist/esm/indexes/lazy-index.js`	1.24 kB
`./packages/db/dist/esm/indexes/reverse-index.js`	538 B
`./packages/db/dist/esm/local-only.js`	808 B
`./packages/db/dist/esm/local-storage.js`	2.1 kB
`./packages/db/dist/esm/optimistic-action.js`	359 B
`./packages/db/dist/esm/paced-mutations.js`	496 B
`./packages/db/dist/esm/proxy.js`	3.75 kB
`./packages/db/dist/esm/query/builder/functions.js`	733 B
`./packages/db/dist/esm/query/builder/index.js`	4.1 kB
`./packages/db/dist/esm/query/builder/ref-proxy.js`	1.05 kB
`./packages/db/dist/esm/query/compiler/evaluators.js`	1.62 kB
`./packages/db/dist/esm/query/compiler/expressions.js`	430 B
`./packages/db/dist/esm/query/compiler/group-by.js`	2.23 kB
`./packages/db/dist/esm/query/compiler/index.js`	2.04 kB
`./packages/db/dist/esm/query/compiler/joins.js`	2.11 kB
`./packages/db/dist/esm/query/compiler/order-by.js`	1.45 kB
`./packages/db/dist/esm/query/compiler/select.js`	1.09 kB
`./packages/db/dist/esm/query/expression-helpers.js`	1.43 kB
`./packages/db/dist/esm/query/ir.js`	673 B
`./packages/db/dist/esm/query/live-query-collection.js`	360 B
`./packages/db/dist/esm/query/live/collection-config-builder.js`	5.55 kB
`./packages/db/dist/esm/query/live/collection-registry.js`	264 B
`./packages/db/dist/esm/query/live/collection-subscriber.js`	2.42 kB
`./packages/db/dist/esm/query/live/internal.js`	145 B
`./packages/db/dist/esm/query/optimizer.js`	2.62 kB
`./packages/db/dist/esm/query/predicate-utils.js`	2.97 kB
`./packages/db/dist/esm/query/subset-dedupe.js`	921 B
`./packages/db/dist/esm/scheduler.js`	1.3 kB
`./packages/db/dist/esm/SortedMap.js`	1.3 kB
`./packages/db/dist/esm/strategies/debounceStrategy.js`	247 B
`./packages/db/dist/esm/strategies/queueStrategy.js`	428 B
`./packages/db/dist/esm/strategies/throttleStrategy.js`	246 B
`./packages/db/dist/esm/transactions.js`	2.9 kB
`./packages/db/dist/esm/utils.js`	924 B
`./packages/db/dist/esm/utils/browser-polyfills.js`	304 B
`./packages/db/dist/esm/utils/btree.js`	5.61 kB
`./packages/db/dist/esm/utils/comparison.js`	952 B
`./packages/db/dist/esm/utils/cursor.js`	457 B
`./packages/db/dist/esm/utils/index-optimization.js`	1.51 kB
`./packages/db/dist/esm/utils/type-guards.js`	157 B

_{compressed-size-action::db-package-size}

github-actions · 2026-03-09T15:26:26Z

Size Change: 0 B

Total Size: 3.85 kB

ℹ️ View Unchanged

Filename	Size
`./packages/react-db/dist/esm/index.js`	225 B
`./packages/react-db/dist/esm/useLiveInfiniteQuery.js`	1.32 kB
`./packages/react-db/dist/esm/useLiveQuery.js`	1.34 kB
`./packages/react-db/dist/esm/useLiveSuspenseQuery.js`	559 B
`./packages/react-db/dist/esm/usePacedMutations.js`	401 B

_{compressed-size-action::react-db-package-size}

…stence Adds a complete Electron example demonstrating offline-first architecture with TanStack DB, combining SQLite persistence for collection data with a SQLite-backed offline transaction outbox. Key features: - SQLite persistence via IPC bridge (main process ↔ renderer) - Custom ElectronSQLiteStorageAdapter for the offline transactions outbox, ensuring pending mutations survive app restarts - Server state persisted to JSON file so data survives dev server restarts - fetchWithRetry for resilient network calls with exponential backoff - Reset button to clear all state (server, SQLite, outbox) - DevTools menu (Cmd+Shift+I) for testing offline mode - StrictMode-safe initialization (ref guard prevents ghost Web Lock from double-mount blocking leader election) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Sort devDependencies alphabetically and align concurrently version with the rest of the workspace. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Use ElectronCollectionCoordinator in the Electron todo app so that local mutations are routed through the leader and all windows receive immediate tx:committed notifications, eliminating the flash on insert. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

kevin-dp and others added 5 commits March 10, 2026 14:23

chore: update pnpm-lock.yaml for Electron example

a248301

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ci: apply automated fixes

24c0a95

chore: fix sherif issues in Electron example

874f005

Sort devDependencies alphabetically and align concurrently version with the rest of the workspace. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

kevin-dp force-pushed the examples/electron-sqlite-persistence branch from fb9f996 to 784699e Compare March 10, 2026 13:23

ci: apply automated fixes

d78ea23

kevin-dp changed the base branch from cursor/persistence-plan-design-doc-f6d0 to kevin/persistence-electron March 12, 2026 09:23

kevin-dp force-pushed the kevin/persistence-electron branch from 15902a8 to 741845b Compare March 12, 2026 10:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(examples): Electron offline-first todo app with SQLite persistence#1345

feat(examples): Electron offline-first todo app with SQLite persistence#1345
kevin-dp wants to merge 6 commits intokevin/persistence-electronfrom
examples/electron-sqlite-persistence

kevin-dp commented Mar 9, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Mar 9, 2026 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Mar 9, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 9, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 9, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

kevin-dp commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

changeset-bot bot commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

pkg-pr-new bot commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

kevin-dp commented Mar 9, 2026 •

edited

Loading

changeset-bot bot commented Mar 9, 2026 •

edited

Loading

pkg-pr-new bot commented Mar 9, 2026 •

edited

Loading

github-actions bot commented Mar 9, 2026 •

edited

Loading

github-actions bot commented Mar 9, 2026 •

edited

Loading