Drizzle studio for IndexedDB

[thanosstamatakis]

Hello everyone,

I recently started using drizzle-kit with PGLite persisting some data from my React-Vite application to IndexedDB. All the setup seems to work very well in general, however I haven't managed to get drizzle-kit studio to run on this setup. Does anyone know of any sort of workaround to get this working (or any way to visualize my PGLite data for local development)? This is my setup right now:

src/db/index.ts

import { PGlite } from '@electric-sql/pglite';
import { PgDialect } from 'drizzle-orm/pg-core/dialect';
import { drizzle } from 'drizzle-orm/pglite';

import migrations from './migrations/migrations.json';
import * as schema from './schema';

const isDev = process.env.NODE_ENV === 'development';

const dbName = isDev ? 'mydb-dev' : 'mydb';

// create the new local db if not already created
const client = await PGlite.create({
  dataDir: `idb://${dbName}`,
});

const _db = drizzle(client, {
  schema,
  logger: isDev,
});

// prevent multiple schema migrations to be run
let isLocalDBSchemaSynced = false;

if (!isLocalDBSchemaSynced) {
  const start = performance.now();
  try {
    // @ts-expect-error 🤷 don't know why db._.session is not a Session
    await new PgDialect().migrate(migrations, _db._.session, dbName);
    isLocalDBSchemaSynced = true;
    // eslint-disable-next-line no-console
    console.info(`✅ Local database ready in ${performance.now() - start}ms`);
  } catch (cause) {
    console.error('❌ Local database schema migration failed', cause);
    throw cause;
  }
}

const db = Object.assign(_db, {
  schema,
});

export { db };

drizzle.config.ts

import { defineConfig } from 'drizzle-kit';

const base = 'apps/web/src/db';
const migrationsFolder = `${base}/migrations`;
const isDev = process.env.NODE_ENV === 'development';

export default defineConfig({
  dialect: 'postgresql',
  driver: 'pglite',
  schema: `${base}/schema.ts`,
  out: migrationsFolder,
  verbose: false,
  migrations: { prefix: 'timestamp' },
  dbCredentials: {
    url: isDev ? 'idb://mydb-dev' : 'idb://mydb',
  },
});

export { migrationsFolder };