|
| 1 | +--- |
| 2 | +title: Integration with Prisma - ElysiaJS |
| 3 | +head: |
| 4 | + - - meta |
| 5 | + - property: 'og:title' |
| 6 | + content: Integration with Prisma - ElysiaJS |
| 7 | + |
| 8 | + - - meta |
| 9 | + - name: 'description' |
| 10 | + content: We may use Prisma to create end-to-end type safety from database to validation to frontend with prismabox |
| 11 | + |
| 12 | + - - meta |
| 13 | + - name: 'og:description' |
| 14 | + content: We may use Prisma to create end-to-end type safety from database to validation to frontend with prismabox |
| 15 | +--- |
| 16 | + |
| 17 | +# Prisma |
| 18 | +[Prisma](https://prisma.io) is an ORM that allows us to interact with databases in a type-safe manner. |
| 19 | + |
| 20 | +It provides a way to define your database schema using a Prisma schema file, and then generates TypeScript types based on that schema. |
| 21 | + |
| 22 | +### Prismabox |
| 23 | +[Prismabox](https://github.com/m1212e/prismabox) is a library that generate TypeBox or Elysia validation models from Prisma schema. |
| 24 | + |
| 25 | +We can use Prismabox to convert Prisma schema into Elysia validation models, which can then be used to ensure type validation in Elysia. |
| 26 | + |
| 27 | +### Here's how it works: |
| 28 | +1. Define your database schema in Prisma Schema. |
| 29 | +2. Add `prismabox` generator to generate Elysia schema. |
| 30 | +3. Use the converted Elysia validation models to ensure type validation. |
| 31 | +4. OpenAPI schema is generated from Elysia validation models. |
| 32 | +5. Add [Eden Treaty](/eden/overview) to add type-safety to your frontend. |
| 33 | + |
| 34 | +``` |
| 35 | + * ——————————————— * |
| 36 | + | | |
| 37 | + | -> | Documentation | |
| 38 | +* ————————— * * ———————— * OpenAPI | | | |
| 39 | +| | prismabox | | ——————— | * ——————————————— * |
| 40 | +| Prisma | —————————-> | Elysia | |
| 41 | +| | | | ——————— | * ——————————————— * |
| 42 | +* ————————— * * ———————— * Eden | | | |
| 43 | + | -> | Frontend Code | |
| 44 | + | | |
| 45 | + * ——————————————— * |
| 46 | +
|
| 47 | +``` |
| 48 | + |
| 49 | +## Installation |
| 50 | +To install Prisma, run the following command: |
| 51 | + |
| 52 | +```bash |
| 53 | +bun add @prisma/client prismabox && \ |
| 54 | +bun add -d prisma |
| 55 | +``` |
| 56 | + |
| 57 | +## Prisma schema |
| 58 | +Assuming you already have a `prisma/schema.prisma`. |
| 59 | + |
| 60 | +We can add a `prismabox` generator to the Prisma schema file as follows: |
| 61 | + |
| 62 | +::: code-group |
| 63 | + |
| 64 | +```ts [prisma/schema.prisma] |
| 65 | +generator client { |
| 66 | + provider = "prisma-client-js" |
| 67 | + output = "../generated/prisma" |
| 68 | +} |
| 69 | + |
| 70 | +datasource db { |
| 71 | + provider = "sqlite" |
| 72 | + url = env("DATABASE_URL") |
| 73 | +} |
| 74 | + |
| 75 | +generator prismabox { // [!code ++] |
| 76 | + provider = "prismabox" // [!code ++] |
| 77 | + typeboxImportDependencyName = "elysia" // [!code ++] |
| 78 | + typeboxImportVariableName = "t" // [!code ++] |
| 79 | + inputModel = true // [!code ++] |
| 80 | + output = "../generated/prismabox" // [!code ++] |
| 81 | +} // [!code ++] |
| 82 | + |
| 83 | +model User { |
| 84 | + id String @id @default(cuid()) |
| 85 | + email String @unique |
| 86 | + name String? |
| 87 | + posts Post[] |
| 88 | +} |
| 89 | + |
| 90 | +model Post { |
| 91 | + id String @id @default(cuid()) |
| 92 | + title String |
| 93 | + content String? |
| 94 | + published Boolean @default(false) |
| 95 | + author User @relation(fields: [authorId], references: [id]) |
| 96 | + authorId String |
| 97 | +} |
| 98 | +``` |
| 99 | +
|
| 100 | +::: |
| 101 | +
|
| 102 | +This will generate Elysia validation models in the `generated/prismabox` directory. |
| 103 | +
|
| 104 | +Each model will have its own file, and the models will be named based on the Prisma model names. |
| 105 | +
|
| 106 | +For example: |
| 107 | +- `User` model will be generated to `generated/prismabox/User.ts` |
| 108 | +- `Post` model will be generated to `generated/prismabox/Post.ts` |
| 109 | +
|
| 110 | +## Using generated models |
| 111 | +Then we can import the generated models in our Elysia application: |
| 112 | +
|
| 113 | +::: code-group |
| 114 | +
|
| 115 | +```ts [src/index.ts] |
| 116 | +import { Elysia, t } from 'elysia' |
| 117 | + |
| 118 | +import { PrismaClient } from '../generated/prisma' // [!code ++] |
| 119 | +import { UserInputCreate, UserPlain } from '../generated/prismabox/User' // [!code ++] |
| 120 | + |
| 121 | +const prisma = new PrismaClient() |
| 122 | + |
| 123 | +const app = new Elysia() |
| 124 | + .put( |
| 125 | + '/', |
| 126 | + async ({ body }) => |
| 127 | + prisma.user.create({ |
| 128 | + data: body |
| 129 | + }), |
| 130 | + { |
| 131 | + body: UserInputCreate, // [!code ++] |
| 132 | + response: UserPlain // [!code ++] |
| 133 | + } |
| 134 | + ) |
| 135 | + .get( |
| 136 | + '/id/:id', |
| 137 | + async ({ params: { id }, status }) => { |
| 138 | + const user = await prisma.user.findUnique({ |
| 139 | + where: { id } |
| 140 | + }) |
| 141 | + |
| 142 | + if (!user) return status(404, 'Not Found') |
| 143 | + |
| 144 | + return user |
| 145 | + }, |
| 146 | + { |
| 147 | + response: { |
| 148 | + 200: UserPlain, // [!code ++] |
| 149 | + 404: t.String() // [!code ++] |
| 150 | + } |
| 151 | + } |
| 152 | + ) |
| 153 | + .listen(3000) |
| 154 | + |
| 155 | +console.log( |
| 156 | + `🦊 Elysia is running at ${app.server?.hostname}:${app.server?.port}` |
| 157 | +) |
| 158 | +``` |
| 159 | +
|
| 160 | +::: |
| 161 | +
|
| 162 | +This allows us to reuse the database schema in Elysia validation models. |
| 163 | +
|
| 164 | +--- |
| 165 | +
|
| 166 | +For more information, please refer to the [Prisma](https://prisma.io), and [Prismabox](https://github.com/m1212e/prismabox) documentation. |
0 commit comments