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)
  },
}))