CRUD operations with Prisma in NextJS - Step-by-Step Execution

Concept Flow - CRUD operations with Prisma

Start

↓

Create

→Read

↓

End

This flow shows the four main database actions: create new data, read existing data, update data, and delete data, done step-by-step.

Execution Sample

NextJS

import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

async function main() {
  const user = await prisma.user.create({ data: { name: 'Ana' } });
  console.log(user);
}

main()
  .catch(e => {
    throw e
  })
  .finally(async () => {
    await prisma.$disconnect()
  });

This code creates a new user named Ana in the database and prints the created user.

Execution Table

Step	Action	Prisma Method	Input Data	Result	Next Step
1	Start main function	-	-	No data yet	Create user
2	Create user	prisma.user.create	{ data: { name: 'Ana' } }	User object with id and name 'Ana'	Read user
3	Read user	prisma.user.findUnique	{ where: { id: user.id } }	User object with id and name 'Ana'	Update user
4	Update user	prisma.user.update	{ where: { id: user.id }, data: { name: 'Anna' } }	User object with updated name 'Anna'	Delete user
5	Delete user	prisma.user.delete	{ where: { id: user.id } }	Deleted user object	End
6	End main function	-	-	All CRUD operations done	Stop

💡 All CRUD operations completed successfully, main function ends.

Variable Tracker

Variable	Start	After Create	After Read	After Update	After Delete	Final
user	undefined	{ id: 1, name: 'Ana' }	{ id: 1, name: 'Ana' }	{ id: 1, name: 'Anna' }	{ id: 1, name: 'Anna' } (deleted)	undefined

Key Moments - 2 Insights

Why does the user variable change after each operation?

Each Prisma method returns the current state of the user after that operation, so the user variable updates to reflect the latest data as shown in execution_table rows 2, 3, 4, and 5.

What happens if we try to read the user after deletion?

After deletion (row 5), the user no longer exists in the database, so reading it would return null or error. This is why the flow ends after delete in row 6.

Visual Quiz - 3 Questions

Look at the execution table, what is the user name after the update step?

A Ana

B An

C Anna

D User deleted

💡 Hint

Check the 'Result' column at Step 4 in the execution_table.

At which step does the user get deleted?

A Step 3

B Step 5

C Step 4

D Step 6

💡 Hint

Look for the 'Delete user' action in the execution_table.

If we skip the update step, what will be the user name after the read step?

A Ana

B Anna

C undefined

D User deleted

💡 Hint

Refer to the 'Result' column at Step 3 in the execution_table.

Concept Snapshot

CRUD with Prisma in Next.js:
- Create: prisma.model.create({ data }) adds new data.
- Read: prisma.model.findUnique/findMany fetches data.
- Update: prisma.model.update({ where, data }) changes data.
- Delete: prisma.model.delete({ where }) removes data.
Each method returns the current state after operation.

Full Transcript

This visual execution shows how to perform CRUD operations using Prisma in a Next.js app. We start by creating a user named Ana. The create method returns the new user object with an id. Next, we read the user by id, confirming the data exists. Then we update the user's name to Anna, and the update method returns the updated user. Finally, we delete the user, and the delete method returns the deleted user object. The variable 'user' updates after each step to reflect the current data state. The flow ends after deletion because the user no longer exists. This step-by-step trace helps beginners see how Prisma methods work and how data changes after each operation.

Practice

1. What does the prisma.user.create() method do in Next.js with Prisma?

easy

A. It adds a new user record to the database.

B. It fetches all user records from the database.

C. It updates an existing user record.

D. It deletes a user record from the database.

Solution

1. Step 1: Understand the method name

   The method create() is used to add new data in Prisma.

2. Step 2: Match method to CRUD operation

   Creating means adding new records, so prisma.user.create() adds a new user.

3. Final Answer:

   It adds a new user record to the database. -> Option A

4. Quick Check:

   Create method = Add new record [OK]

Hint: Create method adds new data, not read or delete [OK]

Common Mistakes:

• Confusing create() with findMany() which reads data
• Thinking create() updates existing records
• Assuming create() deletes records

2. Which of the following is the correct syntax to update a user with id 5 using Prisma in Next.js?

easy

A. prisma.user.edit({ where: { id: 5 }, data: { name: 'Alice' } })

B. prisma.user.modify({ id: 5, name: 'Alice' })

C. prisma.user.update({ where: { id: 5 }, data: { name: 'Alice' } })

D. prisma.user.change({ id: 5, data: { name: 'Alice' } })

Solution

1. Step 1: Identify Prisma update syntax

   Prisma uses update() with where and data keys to update records.

2. Step 2: Check option correctness

   Only prisma.user.update({ where: { id: 5 }, data: { name: 'Alice' } }) uses correct method update() and proper keys where and data.

3. Final Answer:

   prisma.user.update({ where: { id: 5 }, data: { name: 'Alice' } }) -> Option C

4. Quick Check:

   Update method uses where and data keys [OK]

Hint: Update uses update({ where, data }) syntax [OK]

Common Mistakes:

• Using non-existent methods like modify(), change(), edit()
• Missing where or data keys in update()
• Passing id directly without where object

3. Given this code snippet in Next.js with Prisma:

const users = await prisma.user.findMany({ where: { active: true } });
console.log(users.length);

What will console.log(users.length) output?

medium

A. Always 0, because findMany returns undefined.

B. The total number of users, active or not.

C. An error because findMany needs data key.

D. The number of active users in the database.

Solution

1. Step 1: Understand findMany with where filter

   The findMany() method returns an array of records matching the where condition.

2. Step 2: Analyze the filter condition

   Only users with active: true are returned, so users.length is count of active users.

3. Final Answer:

   The number of active users in the database. -> Option D

4. Quick Check:

   findMany with where returns filtered array [OK]

Hint: findMany returns array; length counts filtered records [OK]

Common Mistakes:

• Thinking findMany returns undefined or error
• Ignoring the where filter effect
• Assuming it returns all users without filter

4. Identify the error in this Prisma delete operation:

await prisma.user.delete({ id: 10 });

medium

A. Missing the 'where' key wrapping the id.

B. Using delete() instead of remove().

C. id should be a string, not a number.

D. delete() cannot be used with await.

Solution

1. Step 1: Check delete() method syntax

   Prisma's delete() requires an object with a where key specifying the record to delete.

2. Step 2: Identify missing where key

   The code passes { id: 10 } directly, missing where: { id: 10 }.

3. Final Answer:

   Missing the 'where' key wrapping the id. -> Option A

4. Quick Check:

   Delete needs where key with id [OK]

Hint: Delete needs where: { id } object, not just id [OK]

Common Mistakes:

• Omitting where key in delete()
• Using remove() which does not exist in Prisma
• Thinking id type must be string always
• Believing delete() can't be awaited

5. You want to update a user's email only if the user exists, otherwise create a new user with that email. Which Prisma method best fits this use case in Next.js?

hard

A. prisma.user.create({ data: { email } })

B. prisma.user.upsert({ where: { email }, update: { email }, create: { email } })

C. prisma.user.update({ where: { email }, data: { email } })

D. prisma.user.findUnique({ where: { email } })

Solution

1. Step 1: Understand the upsert method

   Upsert updates if record exists, else creates new one in Prisma.

2. Step 2: Match use case to method

   Since we want to update or create based on existence, upsert() fits perfectly.

3. Final Answer:

   prisma.user.upsert({ where: { email }, update: { email }, create: { email } }) -> Option B

4. Quick Check:

   Upsert = update or create [OK]

Hint: Use upsert to update or create in one call [OK]

Common Mistakes:

• Using update() alone which fails if user missing
• Using create() alone which fails if user exists
• Using findUnique() which only reads data