Lưu Dữ Liệu từ Nuxt 3 tới Supabase với Prisma Đơn Giản

Khi tôi thử lưu dữ liệu từ Nuxt 3 tới Supabase (Postgres) qua Prisma, tôi nghĩ rằng điều này sẽ rất đơn giản. Tuy nhiên, tôi đã gặp phải một số trở ngại — đặc biệt là liên quan đến cấu hình client của Prisma trong môi trường serverless của Nuxt. Sau một thời gian vật lộn, đây là phiên bản cuối cùng đã hoạt động hiệu quả:

1. Cấu Hình Prisma Schema (prisma/schema.prisma)

Vấn đề đầu tiên tôi gặp phải là client của Prisma không được tạo đúng cách trong Nuxt.
Giải pháp: loại bỏ dòng output trong generator để Nuxt sử dụng client ESM mặc định.

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

datasource db {
  provider  = "postgresql"
  url       = env("DATABASE_URL")
  directUrl = env("DIRECT_URL")
}

model Car {
  id            Int    @id @default(autoincrement())
  name          String
  miles         Int
  price         Int
}

2. Tạo Client Prisma Chia Sẻ (/server/utils/prisma.js)

Thách thức: Prisma tạo ra nhiều instance trong môi trường phát triển (vấn đề hot reload).
Giải pháp: tạo một client Prisma chia sẻ duy nhất và tái sử dụng nó.

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

const globalForPrisma = globalThis;

export const prisma =
  globalForPrisma.prisma ??
  new PrismaClient({ log: ['query'] });

if (process.env.NODE_ENV !== 'production')
  globalForPrisma.prisma = prisma;

3. Tạo Route API (/server/api/car/listings/index.js)

Bây giờ mà Prisma đã ổn định, chúng ta có thể viết một handler API để tạo mới các bản ghi xe hơi.

import { prisma } from '~/server/utils/prisma';

export default defineEventHandler(async (event) => {
  const body = await readBody(event);

  const car = await prisma.car.create({
    data: {
      name: body.name,
      miles: body.miles,
      price: body.price,
    },
  });

  return car;
});

4. Chạy và Kiểm Tra

• Tạo client Prisma:
  bash Copy

  npx prisma generate

• Chạy server phát triển của Nuxt:
  bash Copy

  npm run dev

• Kiểm tra route API trong Postman (hoặc Thunder Client trong VS Code).

Khi yêu cầu thành công, bạn sẽ thấy bản ghi được lưu vào Supabase Postgres.

Thực Hành Tốt Nhất

• Cấu hình môi trường: Hãy chắc chắn rằng bạn đã cấu hình môi trường với các biến như DATABASE_URL và DIRECT_URL để hoạt động hiệu quả.
• Quản lý kết nối: Sử dụng client chia sẻ để tránh việc tạo nhiều kết nối không cần thiết đến cơ sở dữ liệu.

Các Cạm Bẫy Thường Gặp

• Lỗi không tìm thấy Prisma Client: Đảm bảo rằng bạn đã chạy npx prisma generate mỗi khi thay đổi schema Prisma.
• Vấn đề CORS: Nếu bạn gặp lỗi liên quan đến CORS trong quá trình phát triển, hãy cấu hình server để cho phép các nguồn gốc cần thiết.

Mẹo Tối Ưu Hiệu Năng

• Sử dụng logging: Kích hoạt logging trong Prisma client để theo dõi các truy vấn và xác định các vấn đề về hiệu suất.
• Tối ưu hóa truy vấn: Hãy cố gắng tối ưu hóa các truy vấn của bạn để giảm thiểu tải trên cơ sở dữ liệu.

Giải Quyết Vấn Đề

• Kết nối không ổn định: Kiểm tra cấu hình mạng và đảm bảo rằng Supabase đang hoạt động bình thường.
• Lỗi khi tạo bản ghi: Kiểm tra dữ liệu đầu vào và đảm bảo rằng chúng phù hợp với schema đã định nghĩa.

Kết Luận

Với hướng dẫn này, bạn đã có thể lưu dữ liệu từ Nuxt 3 tới Supabase bằng Prisma một cách đơn giản và hiệu quả. Hãy thử nghiệm và áp dụng vào dự án của bạn ngay hôm nay! Nếu bạn có bất kỳ câu hỏi nào, hãy để lại câu hỏi bên dưới.

Câu Hỏi Thường Gặp (FAQ)

• Tôi có thể sử dụng Prisma với các cơ sở dữ liệu khác không?
  Có, Prisma hỗ trợ nhiều loại cơ sở dữ liệu như MySQL, MongoDB, và SQLite.
• Làm thế nào để triển khai ứng dụng trên môi trường production?
  Hãy chắc chắn rằng bạn đã cấu hình đúng các biến môi trường và tối ưu hóa các truy vấn.

Tài Nguyên Tham Khảo

• Tài liệu Prisma
• Hướng dẫn Nuxt 3

Với các bước trên, bạn đã sẵn sàng để sử dụng Nuxt 3, Supabase và Prisma để phát triển các ứng dụng mạnh mẽ!