Server action database mutations in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a server action that adds a new user to the database.

NextJS

export const addUser = async (data) => {
  'use server';
  await prisma.user.create({ data: [1] });
};

Drag options to blanks, or click blank then click option'

Adata

Buser

Cinput

Dparams

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong variable name instead of the function argument.

Forgetting to pass the data property inside the create method.

The data object contains the user information to be saved. It must be passed to prisma.user.create inside the data property.

2fill in blank

medium

Complete the code to mark the server action as a server-only function.

NextJS

export const deleteUser = async (id) => {
  [1];
  await prisma.user.delete({ where: { id } });
};

Drag options to blanks, or click blank then click option'

A'use client'

B'use strict'

C'use server'

D'use action'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'use client' instead, which marks client components.

Omitting the directive entirely.

The directive 'use server' marks the function as a server action in Next.js.

3fill in blank

hard

Fix the error in the server action that updates a user's email.

NextJS

export const updateUserEmail = async (id, email) => {
  'use server';
  await prisma.user.update({
    where: { id },
    data: { email: [1] }
  });
};

Drag options to blanks, or click blank then click option'

Aid

Bemail

CuserEmail

Ddata.email

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong variable name like id or userEmail.

Trying to access data.email which is undefined here.

The email parameter holds the new email value and should be assigned directly.

4fill in blank

hard

Fill both blanks to create a server action that toggles a user's active status.

NextJS

export const toggleUserActive = async (id, isActive) => {
  'use server';
  await prisma.user.update({
    where: { id: [1] },
    data: { active: [2] }
  });
};

Drag options to blanks, or click blank then click option'

Aid

BisActive

CuserId

DactiveStatus

Attempts:

3 left

💡 Hint

Common Mistakes

Using undefined variables like userId or activeStatus.

Mixing up the parameters.

The id parameter identifies the user, and isActive is the new active status to set.

5fill in blank

hard

Fill all three blanks to create a server action that creates a post with title and content.

NextJS

export const createPost = async (title, content) => {
  'use server';
  const newPost = await prisma.post.create({
    data: {
      [1]: [2],
      [3]: content
    }
  });
  return newPost;
};

Drag options to blanks, or click blank then click option'

Atitle

Ccontent

Dbody

Attempts:

3 left

💡 Hint

Common Mistakes

Using content as a field name instead of body.

Mixing up keys and values.

The database expects the fields title and body. We assign the title parameter to the title field, and content parameter to the body field.