Revalidation after mutation in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the function used to revalidate a path after mutation in Next.js.

NextJS

import { [1] } from 'next/cache';

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

ArevalidatePath

BuseRouter

CgetServerSideProps

DfetchData

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useRouter instead of revalidatePath

Using getServerSideProps which is unrelated here

Trying to import a non-existent fetchData function

The revalidatePath function from next/cache is used to trigger revalidation of a specific path after a mutation.

2fill in blank

medium

Complete the code to call the revalidation function for the '/dashboard' path after a data mutation.

NextJS

async function updateData() {
  // perform mutation
  await mutateData();
  [1]('/dashboard');
}

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

ArefreshPath

BrevalidatePath

CinvalidateCache

DreloadPage

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent function like refreshPath

Calling reloadPage which reloads the browser but doesn't revalidate cache

Trying to invalidateCache which is not a Next.js function

After mutating data, calling revalidatePath('/dashboard') tells Next.js to refresh the cached data for that path.

3fill in blank

hard

Fix the error in this mutation handler by correctly revalidating the path '/profile' after updating user data.

NextJS

export async function POST(request) {
  await updateUser(request.json());
  [1]('/profile');
  return new Response(null, { status: 200 });
}

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

AreloadPage

BrefreshPath

CrevalidatePath

DinvalidateCache

Attempts:

3 left

💡 Hint

Common Mistakes

Using reloadPage which reloads browser but doesn't revalidate cache

Calling a non-existent invalidateCache function

Using refreshPath which is not a Next.js function

Using revalidatePath('/profile') after updating user data triggers Next.js to refresh the cached page for '/profile'.

4fill in blank

hard

Fill both blanks to import and use the revalidation function correctly after a mutation in Next.js.

NextJS

import { [1] } from 'next/cache';

export async function PATCH(request) {
  await updateSettings(request.json());
  [2]('/settings');
  return new Response(null, { status: 200 });
}

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

ArevalidatePath

BreloadPage

DinvalidateCache

Attempts:

3 left

💡 Hint

Common Mistakes

Using different function names for import and call

Trying to reload the page instead of revalidating cache

Using invalidateCache which does not exist

Importing and calling revalidatePath ensures the '/settings' page cache is refreshed after mutation.

5fill in blank

hard

Fill all three blanks to create a mutation handler that updates data, revalidates the path, and returns a success response.

NextJS

import { [1] } from 'next/cache';

export async function PUT(request) {
  const data = await request.json();
  await [2](data);
  [3]('/account');
  return new Response(null, { status: 200 });
}

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

ArevalidatePath

BupdateAccount

DreloadPage

Attempts:

3 left

💡 Hint

Common Mistakes

Using reloadPage instead of revalidatePath

Not calling the update function before revalidation

Importing or calling functions with wrong names

This code imports revalidatePath, calls updateAccount to mutate data, then calls revalidatePath('/account') to refresh the cache.