Prisma - Next-generation ORM
Tags: tutorial, programming, spanish, typescript
Published: 2022-07-21 05:43:30

Requisitos:
- Conocimiento básico en API REST
- Conocimiento básico de SQL
- [Node.js](https://nodejs.org/en/)
- [npm](https://www.npmjs.com/) client de su preferencia.

En este tutorial veremos como hacer un API REST TODO App con [TypeScript](https://www.typescriptlang.org/), [Prisma](https://www.prisma.io/) y [esbuild](https://esbuild.github.io/).

>⚠️ 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](https://www.prisma.io/docs/concepts/components/prisma-client): Generador de consultas de tipo seguro y autogenerado que se adapta a sus datos.
- [Migraciones](https://www.prisma.io/docs/concepts/components/prisma-migrate): Herramienta para crear y gestionar las migraciones de tu base de datos.
- [Prisma Studio](https://github.com/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](https://github.com/ushieru/blog-prisma).

## Empezemos 🧑‍💻
> Si estas usando VSCode puedes usar el [plugin oficial de Prisma](https://marketplace.visualstudio.com/items?itemName=Prisma.prisma).

## Instalemos nuestras dependencias
```sh
# yarn
$ yarn add -D prisma esbuild @types/node
$ yarn add @prisma/client

# npm
$ npm i -D prisma esbuild @types/node
$ npm i @prisma/client 
```
## levantemos nuestro entorno de trabajo
```sh
# yarn
$ yarn prisma init

# npm
$ npx prisma init
```
Actualicemos nuestras variables de entorno. Para este tutorial practico usaremos SQLite pero puede revisar las que [soporta Prisma](https://www.prisma.io/docs/reference/database-reference/supported-databases).
```Ini
# .env
DATABASE_URL="file:./database.sqlite"
```
Actualicemos nuestro schema.prisma
```rust
// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite" // <- usemos SQLite
  url      = env("DATABASE_URL")
}
```
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](https://dev.to/ushieru/esbuild-desarrollo-sin-dolor-5hmf)
```js
// 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))
```
Actualicemos nuestro **package.json**.
```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"
  }
}
```
Creemos el modelo de nuestras tareas. Si estas usando otra DB que no sea SQLite puede usar enums en el **status**. ([defining-enums](https://www.prisma.io/docs/concepts/components/prisma-schema/data-model#defining-enums))
```rust
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
}
```
Ahora debemos cargar nuestros modelos a la base de datos.
```sh
# yarn
$ yarn prisma db push

# npm
$ npx prisma db push
```

![terminal prisma 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cc3p84jij9ns5slhjh5y.png)

***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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hq1m20arjwdlgl1x5rfj.png)
 
Creemos un cliente de prisma para tener acceso a nuestro ORM y su respectivo CRUD (Create, Read, Update, Delete).

```ts
// 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 } })
}
```

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

> Si usas [Next.js](https://nextjs.org/) debes hacer unos cambios en la declaracion del cliente. Te dejo la [Doc](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices#problem)

Te muestro este pequeño ejemplo con [Koa](https://koajs.com/):
```ts
// 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);
```

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

Y Happy Hacking 🎉👨‍💻