DEV Community 👩‍💻👨‍💻

Ushieru Kokoran
Ushieru Kokoran

Posted on

Prisma - Next-generation ORM

Requisitos:

  • Conocimiento básico en API REST
  • Conocimiento básico de SQL
  • Node.js
  • npm client de su preferencia.

En este tutorial veremos como hacer un API REST TODO App con TypeScript, Prisma y esbuild.

⚠️ No necesitas previo conocimiento de ninguna de estas tecnologías.

Que es Prisma?

Es un ORM de próxima generación con soporte para TypeScript con unas herramientas para facilitarnos la vida:

  • Prisma Client: Generador de consultas de tipo seguro y autogenerado que se adapta a sus datos.
  • Migraciones: Herramienta para crear y gestionar las migraciones de tu base de datos.
  • Prisma Studio: GUI client para tu base de datos.

👀 Para que no haya pierde en donde va cada cosa o si solo vienes a echar un vistazo rápido; te dejo el código en este repo.

Empezemos 🧑‍💻

Si estas usando VSCode puedes usar el plugin oficial de Prisma.

Instalemos nuestras dependencias

# yarn
$ yarn add -D prisma esbuild @types/node
$ yarn add @prisma/client

# npm
$ npm i -D prisma esbuild @types/node
$ npm i @prisma/client 
Enter fullscreen mode Exit fullscreen mode

levantemos nuestro entorno de trabajo

# yarn
$ yarn prisma init

# npm
$ npx prisma init
Enter fullscreen mode Exit fullscreen mode

Actualicemos nuestras variables de entorno. Para este tutorial practico usaremos SQLite pero puede revisar las que soporta Prisma.

# .env
DATABASE_URL="file:./database.sqlite"
Enter fullscreen mode Exit fullscreen mode

Actualicemos nuestro schema.prisma

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite" // <- usemos SQLite
  url      = env("DATABASE_URL")
}
Enter fullscreen mode Exit fullscreen mode

Creamos nuestro builder con esbuild para trabajar con TypeScript.

Si no sabes como funciona esto igual luego deberías darte tiempo para leer mi blog esbuild - Desarrollo sin dolor

// esbuild.dev.js
import { spawn } from 'child_process'
import esbuild from 'esbuild'

let server;

const startServer = (message) => {
    if (server) server.kill('SIGINT')
    server = spawn('node', ['./dist/index.mjs'], { stdio: 'inherit' })
    console.log(`\n${message}\n`)
}

esbuild.build({
    entryPoints: ['./src/index.ts'],
    watch: { onRebuild: (err) => !err && startServer('Rebuilded') },
    bundle: true,
    minify: true,
    platform: 'node',
    format: 'esm',
    target: ['esnext'],
    external: ['/node_modules/*'],
    outfile: './dist/index.mjs',
})
    .then(() => startServer('Done 🚀'))
    .catch(() => process.exit(1))
Enter fullscreen mode Exit fullscreen mode

Actualicemos nuestro package.json.

// package.json
{
  "name": "prisma",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Ushieru Kokoran (https://ushieru.com/)",
  "license": "MIT",
  "type": "module", // <- soporte a mjs
  "scripts": {
    "dev": "node esbuild.dev.js" // <- script para desarrollo
  },
  "dependencies": {
    "@prisma/client": "^4.1.0",
    "@types/koa": "^2.13.5",
    "@types/node": "^18.0.6",
    "koa": "^2.13.4"
  },
  "devDependencies": {
    "esbuild": "^0.14.49",
    "prisma": "^4.1.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

Creemos el modelo de nuestras tareas. Si estas usando otra DB que no sea SQLite puede usar enums en el status. (defining-enums)

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model Task {
  id          String   @id @default(cuid())
  name        String
  description String
  status      String   @default("OPEN") // OPEN, IN_PROGRESS, DONE
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}
Enter fullscreen mode Exit fullscreen mode

Ahora debemos cargar nuestros modelos a la base de datos.

# yarn
$ yarn prisma db push

# npm
$ npx prisma db push
Enter fullscreen mode Exit fullscreen mode

terminal prisma 1

Generate Prisma Client...? Asi es, prisma genera los types de los objetos a partir de las tablas de la base de datos al vuelo. Es posible que VSCode no se de cuenta de este cambio así que hay que reiniciar el server de TypeScript.
Para eso abrimos la paleta de comandos y ejecutamos: TypeScript: Reset TS server.

Restet TS server

Creemos un cliente de prisma para tener acceso a nuestro ORM y su respectivo CRUD (Create, Read, Update, Delete).

// src/crudTask.ts
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

// Tenemos acceso a nuestro modelo task que es un mapeo exacto
// a nuestra tabla en la base de datos. Y con TypeScript tenemos
// el autocompletado para no cometer errores.

export const createTask = async (name: string, description: string) => {
    return await prisma.task.create({
        data: { name, description }
    })
}

export const readTasks = async () => {
    return await prisma.task.findMany()
}

export const readOneTask = async (id: string) => {
    return await prisma.task.findUnique({ where: { id } })
}

export const updateTask = async (id: string, name: string, description: string, status: 'OPEN' | 'IN_PROGRESS' | 'DONE') => {
    return await prisma.task.update({
        data: { name, description, status },
        where: { id }
    })
}

export const deleteTask = async (id: string) => {
    return await prisma.task.delete({ where: { id } })
}
Enter fullscreen mode Exit fullscreen mode

Y ya lo tenemos 🎉🎉 Puedes envolverlo en cualquier backend que quieras en src/index.ts.

Si usas Next.js debes hacer unos cambios en la declaracion del cliente. Te dejo la Doc

Te muestro este pequeño ejemplo con Koa:

// src/index.ts
import Koa from 'koa';
import Router from 'koa-router';
import koaBody from 'koa-body';
import { createTask, readTasks, readOneTask, updateTask, deleteTask } from './crudTask'

const app = new Koa();

app.use(koaBody({ jsonLimit: '5kb' }));

const router = new Router();

router.get('/', (ctx) => ctx.body = 'Hello World');

router.post('/tasks', async (ctx) =>
    ctx.body = await createTask(ctx.request.body.name, ctx.request.body.description));

router.get('/tasks', async (ctx) =>
    ctx.body = await readTasks());

router.get('/tasks/:id', async (ctx) =>
    ctx.body = await readOneTask(ctx.params.id));

router.put('/tasks/:id', async (ctx) =>
    ctx.body = await updateTask(
        ctx.params.id,
        ctx.request.body.name,
        ctx.request.body.description,
        ctx.request.body.status
    ));

router.delete('/tasks/:id', async (ctx) =>
    ctx.body = await deleteTask(ctx.params.id));

app.use(router.routes());

app.listen(3000);
Enter fullscreen mode Exit fullscreen mode

Y ya lo tenemos, vemos un ejemplo con Relaciones? cuéntame en los comentarios.

Y Happy Hacking 🎉👨‍💻

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Good news! You can update to dark mode in your DEV settings.