NextJS PostgreSQL Prisma Example

This example demonstrates how to use NextJS, PostgreSQL and Prisma in WunderGraph.

Getting started

Scaffold the project:

1
npx create-wundergraph-app my-project -E nextjs-postgres-prisma

Then from the project root, install the dependencies and start the development server:

1
2
3
cd my-project
npm install
npm run start

The Prisma Schema

We use Prisma to migrate the database. Find below the schema we're using:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
datasource db {
provider = "postgresql"
url = "postgresql://admin:admin@localhost:54322/example?schema=public"
}
model Post {
id Int @id @default(autoincrement())
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
title String @db.VarChar(255)
content String?
published Boolean @default(false)
author User @relation(fields: [authorId], references: [id])
authorId Int
}
model Profile {
id Int @id @default(autoincrement())
bio String?
user User @relation(fields: [userId], references: [id])
userId Int @unique
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
profile Profile?
}

Seeding the Database

We're using WunderGraph to seed the database:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { createClient } from '../.wundergraph/generated/client';
import fetch from 'node-fetch';
const seed = async () => {
const client = createClient({
customFetch: fetch as any,
});
const user = await client.query({
operationName: 'UserByEmail',
input: {
},
});
if (user?.data?.db_findFirstUser) {
return;
}
const out = await client.mutate({
operationName: 'CreateUser',
input: {
name: 'Jens',
bio: 'Founder@WunderGraph',
title: 'Welcome to WunderGraph!',
content: 'This is WunderGraph =)',
published: true,
},
});
console.log('seed:out', JSON.stringify(out));
};
seed();

Learn more

Deploy to WunderGraph Cloud

The easiest way to deploy your WunderGraph app is to use WunderGraph Cloud. Enable the Vercel integration to deploy the Next.js frontend to Vercel.

Deploy to WunderGraph

Was this article helpful to you?
Provide feedback

Edit this page