Prisma ORM dengan Supabase DB

Pake Prisma ORM buat Ngobrol Sama Database Supabase-mu!

Udah nyaman kan ngobrol sama database Supabase pake Supabase JS Client? Itu cara yang direct dan enak banget, apalagi buat manfaatin semua fitur Supabase secara native.

Tapi, gimana kalau kamu (atau timmu) udah terlanjur cinta sama Prisma ORM? Misalnya karena:

• Kamu suka banget sama type safety dan auto-completion super canggih dari Prisma Client yang di-generate berdasarkan skema.
• Kamu udah biasa sama cara nulis query Prisma yang "mirip objek".
• Kamu pengen pake fitur Prisma Migrate buat ngelola evolusi skema database Supabase-mu dengan lebih terstruktur (meskipun Supabase juga punya sistem migrasi sendiri via SQL Editor atau integrasi dengan tools lain).
• Kamu pengen kode interaksi database-mu lebih portabel kalau suatu saat mau ganti backend PostgreSQL lain.

Kabar baiknya: Prisma BISA BANGET dipake buat ngakses database PostgreSQL yang disediain sama Supabase! Ingat, di balik Supabase itu ada database PostgreSQL standar.

Di bagian ini, kita bakal liat gimana caranya "nyambungin" Prisma ke database Supabase kita, terutama buat aplikasi Toko Kue yang skema tabelnya (kue, pesanan, detail_pesanan) mungkin udah kita bikin di Supabase pake Table Editor atau SQL.

Skenario: Database Supabase Udah Ada, Prisma Mau "Kenalan"

Anggap aja kita udah punya:

1. Proyek Supabase dengan database PostgreSQL yang isinya tabel-tabel Toko Kue kita.
2. Proyek Next.js kita yang udah ke-setup buat Prisma (dari panduan Prisma sebelumnya, udah ada prisma/schema.prisma dasar dan Prisma Client terinstal).

Langkah utamanya adalah ngasih tau Prisma cara konek ke database Supabase dan nyuruh Prisma "ngintip" (introspect) struktur tabel yang udah ada di Supabase biar bisa di-generate jadi model di schema.prisma.

Langkah 1: Dapetin Connection String PostgreSQL dari Supabase

Ini kunci utamanya. Prisma butuh "alamat lengkap" database PostgreSQL Supabase-mu.

1. Buka Dashboard Supabase proyekmu.

2. Pergi ke Settings (ikon gerigi ⚙️).

3. Pilih bagian Database.

4. Di bawah "Connection info" atau "Connection string", kamu bakal nemu beberapa string koneksi. Yang kita butuhin adalah yang formatnya kayak gini (biasanya yang URI atau yang buat External Connections): postgresql://postgres:[YOUR-PASSWORD]@[AWS-REGION].db.supabase.co:5432/postgres

   • Ganti [YOUR-PASSWORD] dengan Database Password yang udah kamu set pas bikin proyek Supabase. (Ingat, ini password database, bukan password akun Supabase-mu).
   • [AWS-REGION].db.supabase.co itu host server databasemu.

   

   (Catatan: Placeholder gambar. Ganti dengan screenshot aktual yang menunjukkan di mana menemukan connection string PostgreSQL di Supabase).

   Copy connection string yang paling lengkap ini.

Langkah 2: Konfigurasi DATABASE_URL di .env Proyek Prisma/Next.js

Sekarang, buka file .env (atau .env.local di proyek Next.js) di proyekmu yang pake Prisma. Update atau tambahin variabel DATABASE_URL dengan connection string PostgreSQL dari Supabase yang baru aja kamu copy.

File .env (atau .env.local):

# GANTI DENGAN CONNECTION STRING SUPABASE POSTGRESQL-MU!
DATABASE_URL="postgresql://postgres:PASSWORD_DATABASE_SUPABASE_ANDA@AWS_REGION.db.supabase.co:5432/postgres"
 
# (Opsional) Jika Prisma butuh directUrl untuk beberapa operasi seperti db push di environment tertentu
# DIRECT_URL="postgresql://postgres:PASSWORD_DATABASE_SUPABASE_ANDA@AWS_REGION.db.supabase.co:5432/postgres" 
# Seringkali DATABASE_URL saja sudah cukup.

PENTING:

• Pastikan kamu ganti PASSWORD_DATABASE_SUPABASE_ANDA dan AWS_REGION.db.supabase.co dengan nilaimu yang beneran!
• Kalau proyekmu udah di-commit ke Git, pastiin file .env ini ada di .gitignore biar password databasemu gak bocor!

Langkah 3: Update datasource di schema.prisma

Buka file prisma/schema.prisma-mu. Pastiin blok datasource db-nya pake provider postgresql dan ngacu ke DATABASE_URL dari environment variable.

// prisma/schema.prisma
generator client {
  provider        = "prisma-client-js"
  previewFeatures = ["multiSchema"] // Penting jika mau akses skema 'auth' juga
}
 
datasource db {
  provider  = "postgresql" // Pastikan ini postgresql
  url       = env("DATABASE_URL")
  // directUrl = env("DIRECT_URL") // Opsional, jika dibutuhkan
  schemas   = ["public", "auth"] // Beritahu Prisma skema mana saja yang akan dihandle
}
 
// Model-modelmu akan ada di sini nanti setelah introspeksi atau kamu definisikan

• provider = "postgresql": Wajib!
• schemas = ["public", "auth"]: (Opsional tapi sangat berguna) Kalau kamu mau Prisma juga "tau" soal tabel-tabel di skema auth Supabase (kayak auth.users), tambahin auth ke array schemas. Ini butuh previewFeatures = ["multiSchema"] di generator client. Skema public itu tempat tabel-tabel kustommu (kayak kue, pesanan) biasanya berada.

Langkah 4: Introspeksi Database Supabase dengan prisma db pull

Sekarang bagian serunya! Kita suruh Prisma buat "ngintip" database Supabase kita dan otomatis nge-generate model-model di schema.prisma berdasarkan tabel-tabel yang udah ada di sana (termasuk tabel kue, pesanan, detail_pesanan yang mungkin udah kita bikin pake Table Editor Supabase, dan tabel-tabel auth).

Buka terminal di root proyekmu, jalanin:

npx prisma db pull

• Prisma bakal konek ke database Supabase-mu (pake DATABASE_URL di .env).
• Dia bakal ngebaca struktur semua tabel di skema public dan auth (sesuai yang kita definisiin di schemas).
• Terus, dia bakal NIMPA file schema.prisma-mu dengan model-model yang baru aja dia "temuin" dari database.

Hasil schema.prisma setelah db pull akan mirip banget sama yang kamu tunjukkin sebelumnya! Lengkap dengan model users dari skema auth, dan model Kue, Pesanan, DetailPesanan dari skema public, beserta relasi dan atribut mapping (@map, @@map, @@schema) kalau nama di database beda sama konvensi Prisma.

Contoh (potongan yang relevan dengan Toko Kue dan auth.users):

// prisma/schema.prisma (setelah db pull dari Supabase)
// ... (generator dan datasource) ...
 
model User { // Ini jadi User karena Prisma map dari tabel 'users' di skema 'auth'
  id                          String            @id @db.Uuid
  email                       String?           @unique 
  // ... field lain dari auth.users ...
  pesanan                     Pesanan[]         // Relasi ke Pesanan kita
 
  @@map("users") // Nunjuk ke tabel 'users'
  @@schema("auth")
}
 
model Kue {
  id                String           @id @default(uuid())
  nama              String
  harga             Decimal          @db.Decimal
  // ... field kue lainnya ...
  detailPesanan     DetailPesanan[]
 
  @@map("kue")
  @@schema("public")
}
 
model Pesanan {
  id                String    @id @default(uuid())
  user_id            String    @map("user_id") 
  user              User      @relation(fields: [user_id], references: [id], map: "pesanan_user_id_fkey")
  // ... field pesanan lainnya ...
  detailPesanan     DetailPesanan[]
 
  @@map("pesanan")
  @@schema("public")
}
 
model DetailPesanan {
  id            String   @id @default(uuid())
  pesananId     String   @map("pesanan_id")
  pesanan       Pesanan  @relation(fields: [pesananId], references: [id], map: "detail_pesanan_pesanan_id_fkey")
  kue_id         String   @map("kue_id") 
  kue           Kue      @relation(fields: [kue_id], references: [id], map: "detail_pesanan_kue_id_fkey")
  // ... field detail pesanan lainnya ...
 
  @@map("detail_pesanan")
  @@schema("public")
}

• Perhatiin @@map("nama_tabel_asli") dan @map("nama_kolom_asli") kalau nama model/field Prisma beda sama di DB.
• Relasi ke auth.users juga harusnya ke-detect dengan benar (misal, dari Pesanan.user_id ke User.id).

Langkah 5: Generate Ulang Prisma Client

Setelah schema.prisma-mu update hasil dari db pull, jangan lupa generate ulang Prisma Client biar dia "sadar" sama skema baru ini:

npx prisma generate

Langkah 6: Menggunakan Prisma Client untuk Query ke Database Supabase

Sekarang, kamu bisa pake instance prisma (dari PrismaClient) di kode Next.js API Routes-mu (atau di Server Components, atau di mana pun kamu butuh akses database dari backend) buat ngelakuin operasi CRUD ke tabel-tabel Supabase-mu, dengan semua type safety dan auto-completion dari Prisma!

Contoh di API Route Next.js (src/app/api/kue/route.ts yang udah kita bikin sebelumnya, sekarang pake Prisma Client):

// src/app/api/kue/route.ts (Versi Pake Prisma Client ke Supabase)
import { NextResponse } from 'next/server';
import prisma from '@/lib/prismaClient'; // Asumsi kamu udah bikin file prismaClient.ts
                                        // yang nginisialisasi PrismaClient singleton
 
export async function GET(request: Request) {
  try {
    const semuaKue = await prisma.kue.findMany({ // Pake metode Prisma!
      orderBy: {
        created_at: 'desc', // Urut dari terbaru
      },
    });
    return NextResponse.json(semuaKue);
  } catch (error) {
    console.error("Error ambil semua kue via Prisma:", error);
    return NextResponse.json({ message: "Gagal mengambil data kue." }, { status: 500 });
  }
}
 
// Fungsi POST, PUT, DELETE juga bisa diubah pake metode Prisma Client
// misalnya prisma.kue.create(), prisma.kue.update(), prisma.kue.delete()

Keuntungan Pake Prisma Client di Sini:

• Type Safety Kuat: Semua query dan hasilnya udah diketik berdasarkan schema.prisma.
• Auto-completion: VS Code bakal ngasih saran metode (findMany, create, dll.) dan opsi query (where, select, include).
• Sintaks Query yang Konsisten: Gak peduli database di baliknya apa (selama didukung Prisma), cara nulis query-nya mirip.

Workflow ke Depan: Prisma sebagai Source of Truth atau Database sebagai Source of Truth?

Setelah setup awal ini, kamu punya dua pilihan utama buat workflow skema ke depannya:

1. Prisma sebagai Source of Truth (Schema-First):

   • Semua perubahan skema (nambah tabel, nambah kolom, ubah tipe) kamu lakuin di schema.prisma.
   • Terus, kamu jalanin npx prisma migrate dev --name deskripsi-migrasi buat nerapin perubahan itu ke database Supabase-mu.
   • Ini ngasih kamu histori migrasi yang jelas dan versionable. Ini workflow yang sering direkomendasikan kalau kamu mau pake Prisma secara penuh.

2. Database sebagai Source of Truth (Introspection-First):

   • Kamu ngubah skema langsung di Supabase Dashboard (pake Table Editor atau SQL Editor).
   • Setiap kali ada perubahan di Supabase, kamu jalanin npx prisma db pull buat ngupdate schema.prisma-mu biar cocok.
   • Terus npx prisma generate buat update Prisma Client.
   • Workflow ini oke kalau kamu lebih suka ngelola skema secara visual di Supabase atau kalau ada orang lain/sistem lain yang juga ngubah skema database Supabase-mu di luar Prisma.

Pilih workflow yang paling nyaman buatmu dan timmu.

Menggunakan Prisma ORM dengan database Supabase itu ngasih kamu yang terbaik dari dua dunia: kemudahan BaaS dari Supabase (database PostgreSQL instan, auth, storage) PLUS kekuatan type safety, auto-completion, dan migrasi terstruktur dari Prisma!

Ini mungkin nambahin satu lapisan abstraksi lagi, tapi buat proyek TypeScript yang ngedepanin kualitas kode dan pengalaman developer, kombinasi ini bisa jadi sangat powerful.