Conectando con la base de datos

La mayoría de las aplicaciones reales cuentan con una forma de persistir los datos que se generan. Para este proyecto vamos a guardar a nuestros usuarios en una base de datos noSQL.

También lo haremos con nuestros posts, y como este curso trata de forma general cómo trabajar con una base de datos, para evitar fricciones y poder seguir construyendo, usaremos MongoDB en la nube, específicamente en la nube oficial: Atlas.

MongoDB es una de las bases de datos más usadas del mundo según StackOverflow. Sabiendo esto, vamos a crear nuestra base de datos ya mismo.

!https://i.imgur.com/Xj0lnRX.png

🚀 Consiguiendo nuestra base de datos en Atlas

Creamos una cuenta en Mongo Atlas, para luego crear en la sección de acceso un usuario administrador. Guarda este usuario y la contraseña que estamos por utilizarlo.

!https://i.imgur.com/bv4KXbn.png

Creamos una base de datos nueva y esperamos a que esté lista.

!https://i.imgur.com/njBYafa.png

Una vez lista, damos clic en conectar y seleccionamos driver, copiamos el URL del enlace y nos lo llevamos a nuestro archivo .env donde será útil para Prisma.

!https://i.imgur.com/wgdGMuw.png

// .env

DATABASE_URL="mongodb+srv://yutu:jLkKbDgQ0KNRt91h@cluster0.ctjwaaq.mongodb.net/yutu?retryWrites=true&w=majority"

Por si acaso 🚨 también declaramos la variable en nuestra terminal.

export DATABASE_URL="mongodb+srv://yutu:jLkKbDgQ0KNRt91h@cluster0.ctjwaaq.mongodb.net/yutu?retryWrites=true&w=majority"

¡Listo! Ahora podemos conectarnos a nuestra base de datos con Prisma.

👀 ES IMPORTANTE: que agregues el nombre de tu base de datos (si la DB es nueva, puedes decidir el nombre de tu base de datos aquí: mongodb+srv://yutu:jLkKbDgQ0KNRt91h@cluster0.ctjwaaq.mongodb.net/nombre-de-mi-db?retryWrites=true&w=majority

⚙️ Configurando Prisma

Vamos a instalar Prisma que será nuestro ORM para lidiar con cualquier base de datos en el futuro, lo cual es una de las más grandes ventajas al usarla. Y usaremos Nuestra DATABASE_URL para conectarnos.

👩🏼‍💻 Instalamos los paquetes(bibliotecas) que hacen falta:

npm install --save-dev prisma
npm install @prisma/client

Ahora vamos a inicializar el archivo Schema:

npx prisma init --datasource-provider mongodb

!https://i.imgur.com/KxujrEQ.png

En la imagen podemos ver que tenemos muchas opciones, incluso la opción de usar una base de datos “custom”.

Ahora podemos ir a nuestro schema.prisma que se encuentra dentro de una nueva carpeta llamada también prisma

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

datasource db {
  provider  = "mongodb"
  url       = env("DATABASE_URL")
  directUrl = env("MONGO_ATLAS")
}

model User {
  id         String   @id @default(uuid())
  createdAt  DateTime @default(now())
  updatedAt  DateTime @updatedAt
  name       String
  email      String   @unique
	picture    String
  credential String
}

model Post {
  id        String   @id @default(auto()) @map("_id") @db.ObjectId
  slug      String?  @unique
  title     String?
  body      String?
  author    User     @relation(fields: [userId], references: [id])
  published Boolean  @default(false)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  userId    String   @db.ObjectId
}

Hemos escrito nuestros primeros modelos de datos que serán la forma que tendrán nuestros usuarios y entradas del blog, con esto podemos ya actualizar nuestra base de datos.

npx prisma db push

!https://i.imgur.com/LI7JnCI.png

Con este único comando hemos creado nuestra base de datos yutu.

También ha "empujado" todos los cambios necesarios a nuestra base de datos para coincidir con el schema que hemos escrito.

Finalmente, ha generado los tipos de Typescript del cliente de Prisma.

Así que gozaremos del auto-completado y el chequeo de tipos al trabajar con nuestra base de datos. 🔥

👀 Prisma tiene un plugin para VSCode que seguro encontrarás muy útil

💽 Usando el cliente de Prisma correctamente

Vamos a crear un archivo que nos ayudara con la conexión a la base de datos, de esta forma no agotamos las conexiones a nuestra base de datos mientras estamos desarrollando.

// app/utils/db.ts

import { PrismaClient } from "@prisma/client";

let db: PrismaClient;

declare global {
  var __db__: PrismaClient | undefined;
}
if (process.env.NODE_ENV === "production") {
  db = new PrismaClient();
} else {
  if (!global.__db__) {
    global.__db__ = new PrismaClient();
  }
  db = global.__db__;
  db.$connect();
}

export { db };

No te preocupes mucho por el contenido de este archivo, puedes pensar en él, como una forma segura de trabajar en desarrollo con una conexión más permanente, pero en producción (el bloque if) siempre se creará un nuevo cliente.

Este archivo es muy bello si lo observas bien 😍

🏁 Conclusion:

Con todo lo anterior, estamos listos(as) para usar nuestra base de datos. En la siguiente lección vamos a escribir en nuestra base de datos para posteriormente leer de ella.

Aprende más en los enlaces relacionados:

MongoDB Prisma Docs: