Requisitos:
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 Consumer: 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 consumer 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 @varieties/node
$ yarn add @prisma/consumer
# npm
$ npm i -D prisma esbuild @varieties/node
$ npm i @prisma/consumer
levantemos nuestro entorno de trabajo
# 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.
# .env
DATABASE_URL="file:./database.sqlite"
Actualicemos nuestro schema.prisma
// prisma/schema.prisma
generator consumer {
supplier = "prisma-client-js"
}
datasource db {
supplier = "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 weblog 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.construct({
entryPoints: ['./src/index.ts'],
watch: { onRebuild: (err) => !err && startServer('Rebuilded') },
bundle: true,
minify: true,
platform: 'node',
format: 'esm',
goal: ['esnext'],
exterior: ['/node_modules/*'],
outfile: './dist/index.mjs',
})
.then(() => startServer('Performed 🚀'))
.catch(() => course of.exit(1))
Actualicemos nuestro package deal.json.
// package deal.json
{
"identify": "prisma",
"model": "1.0.0",
"predominant": "index.js",
"writer": "Ushieru Kokoran (https://ushieru.com/)",
"license": "MIT",
"kind": "module", // <- soporte a mjs
"scripts": {
"dev": "node esbuild.dev.js" // <- script para desarrollo
},
"dependencies": {
"@prisma/consumer": "^4.1.0",
"@varieties/koa": "^2.13.5",
"@varieties/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 standing. (defining-enums)
generator consumer {
supplier = "prisma-client-js"
}
datasource db {
supplier = "sqlite"
url = env("DATABASE_URL")
}
mannequin Activity {
id String @id @default(cuid())
identify String
description String
standing String @default("OPEN") // OPEN, IN_PROGRESS, DONE
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Ahora debemos cargar nuestros modelos a la base de datos.
# yarn
$ yarn prisma db push
# npm
$ npx prisma db push
Generate Prisma Consumer…? Asi es, prisma genera los varieties 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.
Creemos un cliente de prisma para tener acceso a nuestro ORM y su respectivo CRUD (Create, Learn, Replace, Delete).
// src/crudTask.ts
import { PrismaClient } from '@prisma/consumer';
const prisma = new PrismaClient();
// Tenemos acceso a nuestro modelo activity 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 (identify: string, description: string) => {
return await prisma.activity.create({
knowledge: { identify, description }
})
}
export const readTasks = async () => {
return await prisma.activity.findMany()
}
export const readOneTask = async (id: string) => {
return await prisma.activity.findUnique({ the place: { id } })
}
export const updateTask = async (id: string, identify: string, description: string, standing: 'OPEN' | 'IN_PROGRESS' | 'DONE') => {
return await prisma.activity.replace({
knowledge: { identify, description, standing },
the place: { id }
})
}
export const deleteTask = async (id: string) => {
return await prisma.activity.delete({ the place: { id } })
}
Y ya lo tenemos 🎉🎉 Puedes envolverlo en cualquier backend que quieras en src/index.ts.
Si usas Subsequent.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.physique = 'Good day World');
router.submit('/duties', async (ctx) =>
ctx.physique = await createTask(ctx.request.physique.identify, ctx.request.physique.description));
router.get('/duties', async (ctx) =>
ctx.physique = await readTasks());
router.get('/duties/:id', async (ctx) =>
ctx.physique = await readOneTask(ctx.params.id));
router.put('/duties/:id', async (ctx) =>
ctx.physique = await updateTask(
ctx.params.id,
ctx.request.physique.identify,
ctx.request.physique.description,
ctx.request.physique.standing
));
router.delete('/duties/:id', async (ctx) =>
ctx.physique = await deleteTask(ctx.params.id));
app.use(router.routes());
app.hear(3000);
Y ya lo tenemos, vemos un ejemplo con Relaciones? cuéntame en los comentarios.
Y Joyful Hacking 🎉👨💻
