Package Exports

tanstack-db-pglite
tanstack-db-pglite/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tanstack-db-pglite) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

tanstack-db-pglite

A seamless integration between TanStack DB and PGLite with Drizzle ORM for browser-based database management.

Installation

npm install tanstack-db-pglite @tanstack/db drizzle-orm @electric-sql/pglite

Note: @tanstack/db and drizzle-orm are peer dependencies and must be installed separately.

Quick Start

import { PGLite } from '@electric-sql/pglite'
import { createCollection } from '@tanstack/react-db'
import { drizzle } from 'drizzle-orm/pglite'
import { drizzleCollectionOptions } from 'tanstack-db-pglite'
import { chats } from '~/drizzle'

const pglite = new PGLite()
const db = drizzle(pglite)

export const chatsCollection = createCollection(drizzleCollectionOptions({
  db,
  table: chats,
  primaryColumn: chats.id,
  prepare: async () => {
    // Prepare your database before starting the collection (e.g., run migrations)
    await waitForMigrations()
  },
  sync: async ({ collection, write }) => {
    // Send some data to your backend to sync and receive the response
    const sync = await syncWithCloud(
      collection.toArray.map(c => ({
        id: c.id,
        updatedAt: c.updatedAt
      }))
    )

    sync.forEach((item) => {
      if (item.type === 'delete') {
        write({ type: 'delete', value: collection.get(item.value)! })
      }
      else {
        write(item)
      }
    })
  },
  onInsert: async (params) => {
    await saveInCloud(params)
  },
  onUpdate: async (params) => {
    await updateInCloud(params)
  },
  onDelete: async (params) => {
    await deleteInCloud(params)
  },
}))