A real solution for client-side Prisma types

We recently migrated an internal application from Sequelize to Prisma. I love the way we can observe our entire database schema with a single file and generate actual sql files for migrations. Recently I figured out a simple way to import Prisma types on the client-side. We are using Turbo repo and one of our devs ended up using a generator with the Prisma schema to create types for the front-end. I don't like redundancy so I did some digging. Here's what I did to solve the issue.

root directory snapshot

pnpm-workspace.yaml

packages:
  - "client"
  - "server"
  - "prisma"
  - "packages/*"

package.json

{
  "name": "tutorial",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "turbo run dev --parallel",
    "dev:client": "turbo run dev --filter=!server --parallel",
    "build": "turbo run build",
    "build:client": "turbo run build --filter=!server",
    "start": "turbo run start"
  },
  "devDependencies": {
    "turbo": "^1.11.1"
  }
}

turbo.json

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "dev": {
      "dependsOn": ["db:generate"],
      "cache": false
    },
    "build": {
      "dependsOn": ["db:generate"],
      "outputs": ["dist/**"],
      "cache": false
    },
    "start": {
      "dependsOn": ["^build"],
      "cache": false
    },
    "db:generate": {
      "cache": false
    }
  }
}

prisma directory snapshot

prisma/package.json

{
  "name": "prisma",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "db:generate": "prisma generate",
    "db:push": "prisma db push",
    "db:seed": "ts-node seed.ts"
  },
  "dependencies": {
    "@prisma/client": "5.7.1",
    "prisma": "^5.5.2",
    "ts-node": "^10.9.1"
  }
}

prisma/index.ts

export * from '@prisma/client';

client/package.json ➡️ devDependencies

...
"prisma": "workspace:*",
...

client/tsconfig.json

{
  "extends": "tsconfig/vue.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "prisma": ["../prisma/node_modules/@prisma/client/*"]
    },
    "types": [
      "../prisma/node_modules/@prisma/client/index.d.ts",
      "../prisma/node_modules/@prisma/client/runtime/library.d.ts"
    ]    
  },
  "include": ["src"],
  "exclude": ["dist", "node_modules"]
}

server/package.json ➡️ dependencies

...
"prisma": "workspace:*",
...

server/tsconfig.json

{
  "extends": "tsconfig/node.json",
  "compilerOptions": {
    "baseUrl": ".",
    "strict": false,
    "paths": {
      "@/*": ["src/*"],
      "prisma": ["../prisma/node_modules/@prisma/client/*"]
    },
    "types": [
      "../prisma/node_modules/@prisma/client/index.d.ts",
      "../prisma/node_modules/@prisma/client/runtime/library.d.ts"
    ]
  },
  "include": ["src"],
  "exclude": ["dist", "node_modules"]
}

On the client we can import Prisma types like this:

import type { User } from 'prisma';

Hover over User to verify that the types will resolve correctly.

On the server side we can create a new Prisma client instance like this:

import { PrismaClient } from 'prisma';

export const prisma = new PrismaClient();

Hover over PrismaClient() to verify that it will resolve correctly.

Prisma doesn't include relationships with the generate types so we have to do this by hand. Here's a quick example.

prisma/index.ts

export * from '@prisma/client';

import type { User as $User, Role } from '@prisma/client';

export type User = {
  role: Role;
} & $User;

Hover over User to verify that Role will be included in the type.

I imagine this will be helpful to many as I haven't found a direct answer for this elsewhere. If you questions or comments please feel free to share!