Prisma IDB FaviconPrisma IDB

Quick Start

Install, configure, and open the client in a new project

Installation

Install the runtime packages:

npm install @prisma-next-idb/client-idb @prisma/orm-toolchain

Install the dev tools:

npm install --save-dev prisma @prisma/cli-engine @prisma/orm-framework \
  @prisma-next-idb/family-idb @prisma-next-idb/target-idb \
  @prisma-next-idb/adapter-idb @prisma-next-idb/driver-idb

Schema

Create src/prisma/schema.prisma. No generator block is needed.

model User {
  id    String  @id
  name  String
  email String? @unique
  todos Todo[]
}

model Todo {
  id     String  @id
  title  String
  done   Boolean
  userId String
  user   User    @relation(fields: [userId], references: [id], onDelete: Cascade)
}

Configure

Create prisma.config.ts:

import { definePrismaConfig } from "@prisma/cli-engine";
import { defineConfig as ormConfig } from "@prisma-next-idb/family-idb/config-types";
import { prismaIdbContract } from "@prisma-next-idb/family-idb/contract-psl";
import idbFamily from "@prisma-next-idb/family-idb/control";
import idbTarget from "@prisma-next-idb/target-idb/control";
import idbAdapter from "@prisma-next-idb/adapter-idb/control";
import idbDriver from "@prisma-next-idb/driver-idb/control";

export default definePrismaConfig({
  orm: ormConfig({
    family: idbFamily,
    target: idbTarget,
    adapter: idbAdapter,
    driver: idbDriver,
    db: { connection: ":memory:" },
    contract: prismaIdbContract("src/prisma/schema.prisma"),
    migrations: { dir: "migrations" },
  }),
});

Bootstrap

Both CLIs are devDependencies, so npx resolves them locally. Run once on a fresh project:

npx prisma contract emit
npx prisma-next-idb migration plan
npx prisma-next-idb migration contract-space
npx prisma-next-idb migration preflight

This writes contract.json, contract.d.ts, contract-space.generated.ts, and the first migration package under migrations/app/ (its contract snapshot lands in the shared migrations/snapshots/<hash>/ store). Commit all of them.

prisma-next-idb reads --contract/--migrations-dir from prisma.config.ts (contract.output / migrations.dir) — the same config prisma contract emit reads — so no flags are needed here even though this example keeps its contract under src/prisma/ rather than the src/lib/prisma/ most examples use. Pass --contract/--migrations-dir/--config explicitly only if you need to point at something other than what the config declares.

Open the client

Create src/db.ts:

import { createAutoMigratingIdbClient } from "@prisma-next-idb/client-idb/client-auto";
import type { IdbClient } from "@prisma-next-idb/client-idb/client-auto";
import type { Contract } from "./prisma/contract";
import { contractSpace } from "./prisma/contract-space.generated";

type Db = IdbClient<Contract>;

let db: Promise<Db> | null = null;

export function getDb(): Promise<Db> {
  return (db ??= createAutoMigratingIdbClient({ contractSpace, dbName: "my-app" }));
}

createAutoMigratingIdbClient applies any pending migrations before resolving. Call getDb() from browser code whenever you need the client.

Next

On this page