Server action database mutations in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when this server action updates a record?

Consider this Next.js server action that updates a user's name in the database. What will be the rendered output after the update?

NextJS

import { revalidatePath } from 'next/cache';

export async function updateUserName(userId, newName) {
  await db.user.update({
    where: { id: userId },
    data: { name: newName }
  });
  revalidatePath('/users');
  return 'Update successful';
}

export default async function Page() {
  const message = await updateUserName(1, 'Alice');
  return <p>{message}</p>;
}

A <p>Update successful</p>

B <p>undefined</p>

C <p>Error: revalidatePath is not a function</p>

D <p>Loading...</p>

💡 Hint

Think about what the server action returns and how the component uses it.

The server action returns the string 'Update successful', which the component renders inside a paragraph.

📝 Syntax

intermediate

Which option correctly defines a Next.js server action for deleting a post?

Identify the correct syntax for a server action that deletes a post by ID using Next.js conventions.

A

}
;)'stsop/'(htaPetadilaver  
;)} } dItsop :di { :erehw {(eteled.tsop.bd tiawa  
{ )dItsop(tsoPeteled noitcnuf cnysa tropxe

B

export function deletePost(postId) {
  db.post.delete({ where: { id: postId } });
  revalidatePath('/posts');
}

C

export async function deletePost(postId) {
  await db.post.delete({ where: { id: postId } });
  revalidatePath('/posts');
}

D

async function deletePost(postId) {
  await db.post.delete({ where: { id: postId } });
  revalidatePath('/posts');
}

💡 Hint

Remember to export the function and use the correct 'where' clause syntax.

Option C correctly exports an async function, uses 'where: { id: postId }' to specify the record, and calls revalidatePath.

🔧 Debug

advanced

Why does this server action cause a runtime error?

Examine the server action below. Why does it cause a runtime error when called?

NextJS

export async function createUser(name) {
  const user = await db.user.create({
    data: { name }
  });
  revalidatePath('/users');
  return user;
}

// Called as createUser(); without arguments

A No error, returns a user with empty name

B ReferenceError: revalidatePath is not defined

C SyntaxError: Unexpected token 'await'

D TypeError: Cannot read property 'name' of undefined

💡 Hint

What happens if the function is called without the required argument?

The function expects a 'name' argument. Calling it without arguments makes 'name' undefined, causing the database create to fail or throw a TypeError.

❓ state_output

advanced

What is the state of the database after this server action runs?

This server action attempts to update a user's email but uses incorrect field names. What is the state of the database after running it?

NextJS

export async function updateUserEmail(userId, newEmail) {
  await db.user.update({
    where: { id: userId },
    data: { emailAddress: newEmail }
  });
  revalidatePath('/users');
  return 'Email updated';
}

// Assume 'email' is the correct field name in the database, not 'emailAddress'.

A The user's email is updated to newEmail successfully.

B The user's email remains unchanged; an error is thrown.

C A new user is created with the email newEmail.

D The database is cleared of all users.

💡 Hint

Check the field names used in the update data object.

The field 'emailAddress' does not exist in the database schema. The update call fails and throws an error, so the email remains unchanged.

🧠 Conceptual

expert

Which statement about Next.js server actions and database mutations is true?

Choose the correct statement about how Next.js server actions handle database mutations and cache updates.

A Server actions run on the server, perform database mutations, and can trigger cache invalidation with revalidatePath().

B Server actions automatically update the UI without needing revalidation or cache control.

C Server actions run on the client and directly mutate the database without cache updates.

D Server actions cannot perform database mutations; they only fetch data.

💡 Hint

Think about where server actions run and how cache is managed in Next.js.

Server actions run on the server, can mutate the database, and require explicit cache invalidation like revalidatePath() to update UI data.