[INTEGRATION]: PRISMA_ORM

Prisma Integration

Replace mock data with real database queries using Prisma ORM and PostgreSQL.

[0x00] OVERVIEW

Fabrk templates use mock data by default. This guide shows how to replace mocks with real database queries using Prisma.

[WHAT YOU'LL INTEGRATE]:

Prisma Client for type-safe database access
Schema design for template data models
CRUD operations in templates
Database migrations and seeding

[0x01] STEP 1: VERIFY SETUP

1$# Check Prisma is installed
2$npm list @prisma/client
3
4$# Verify schema exists
5$cat prisma/schema.prisma
6
7$# Run initial migration
8$npx prisma db push

[0x02] STEP 2: DEFINE MODELS

Add models to prisma/schema.prisma:

1// Example: Analytics Dashboard data
2model Metric {
3  id          String   @id @default(cuid())
4  userId      String
5  name        String
6  value       Float
7  change      Float
8  icon        String
9  createdAt   DateTime @default(now())
10  user        User     @relation(fields: [userId], references: [id])
11}
12
13model Activity {
14  id          String   @id @default(cuid())
15  userId      String
16  type        String
17  description String
18  timestamp   DateTime @default(now())
19  user        User     @relation(fields: [userId], references: [id])
20}

[0x03] STEP 3: REPLACE MOCK DATA

Before (Mock Data):

1// Mock data in component
2const metrics = [
3  { name: "Revenue", value: 45231, change: 12.5 },
4  { name: "Users", value: 2350, change: 8.1 },
5];

After (Prisma):

1import { prisma } from "@/lib/db";
2
3export default async function AnalyticsPage() {
4  const session = await auth();
5
6  // Fetch real data from database
7  const metrics = await prisma.metric.findMany({
8    where: { userId: session.user.id },
9    orderBy: { createdAt: 'desc' },
10    take: 4,
11  });
12
13  return <MetricCards metrics={metrics} />;
14}

[0x04] COMMON QUERIES

Fetch user-specific data:

1const data = await prisma.item.findMany({
2  where: { userId: session.user.id },
3});

Create new record:

1await prisma.item.create({
2  data: {
3    name: "New Item",
4    userId: session.user.id,
5  },
6});

Update with validation:

1await prisma.item.update({
2  where: {
3    id: itemId,
4    userId: session.user.id, // Ensure ownership
5  },
6  data: { name: newName },
7});

[0x05] TROUBLESHOOTING

[ERROR]: PrismaClient is not configured

Fix: Run `npx prisma generate`

[ERROR]: Too many database connections

Fix: Use the Prisma singleton pattern in `lib/db.ts`

[0x06] NEXT STEPS

Add Polar.sh for payments and subscriptions
Integrate Resend for transactional emails

1// Example: Analytics Dashboard data

2model Metric {

3 id String @id @default(cuid())

4 userId String

5 name String

6 value Float

7 change Float

8 icon String

9 createdAt DateTime @default(now())

10 user User @relation(fields: [userId], references: [id])

11}

13model Activity {

14 id String @id @default(cuid())

15 userId String

16 type String

17 description String

18 timestamp DateTime @default(now())

19 user User @relation(fields: [userId], references: [id])

20}

1import { prisma } from "@/lib/db";

3export default async function AnalyticsPage() {

4 const session = await auth();

6 // Fetch real data from database

7 const metrics = await prisma.metric.findMany({

8 where: { userId: session.user.id },

9 orderBy: { createdAt: 'desc' },

10 take: 4,

11 });

13 return <MetricCards metrics={metrics} />;

14}