Mocking data fetching in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the React hook used for state management.

NextJS

import React, { [1] } from 'react';

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

AuseState

BuseEffect

CuseContext

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing useEffect instead of useState

Confusing useContext with useState

The useState hook is used to manage state in functional components.

2fill in blank

medium

Complete the code to fetch data inside a React effect hook.

NextJS

useEffect(() => {
  async function fetchData() {
    const response = await fetch('/api/data');
    const data = await response.[1]();
    setData(data);
  }
  fetchData();
}, []);

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

Atext

Bjson

Cblob

DformData

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() which returns plain text

Using blob() which returns binary data

The json() method parses the response body as JSON, which is common for API data.

3fill in blank

hard

Fix the error in the mock fetch function to return a resolved promise with JSON data.

NextJS

global.fetch = jest.fn(() =>
  Promise.[1]({
    json: () => Promise.resolve({ message: 'Hello' })
  })
);

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

Arace

Breject

Cresolve

Dall

Attempts:

3 left

💡 Hint

Common Mistakes

Using reject which causes the promise to fail

Using all or race which are for multiple promises

Use Promise.resolve to return a successful resolved promise with the mock data.

4fill in blank

hard

Fill both blanks to create a mock response with a delay and JSON data.

NextJS

global.fetch = jest.fn(() =>
  new Promise(([1], reject) => {
    setTimeout(() => [2]({ json: () => Promise.resolve({ success: true }) }), 100);
  })
);

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

Aresolve

Breject

CresolveData

Dreturn

Attempts:

3 left

💡 Hint

Common Mistakes

Using reject instead of resolve

Using return which is not a function parameter

Both blanks use resolve to fulfill the promise and return the mock JSON data after a delay.

5fill in blank

hard

Fill all three blanks to create a React component that fetches mocked data and displays it.

NextJS

import React, { [1] } from 'react';

export default function MockComponent() {
  const [data, setData] = [2](null);

  React.useEffect(() => {
    async function fetchData() {
      const response = await fetch('/api/mock');
      const json = await response.[3]();
      setData(json);
    }
    fetchData();
  }, []);

  return <div>{data ? data.message : 'Loading...'}</div>;
}

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

AuseState

BuseEffect

Cjson

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using useEffect instead of useState for state

Using text() instead of json() to parse response

The component uses useState to hold data, calls fetch inside useEffect, and parses the response with json().

Practice

1. What is the main purpose of mocking data fetching in a Next.js app?

easy

A. To encrypt data before sending it

B. To speed up the production server

C. To permanently store data on the client

D. To simulate data retrieval without needing a real server

Solution

1. Step 1: Understand mocking concept

   Mocking means pretending to get data, so you don't rely on a real server.

2. Step 2: Identify purpose in Next.js

   This helps build and test UI without waiting for real backend responses.

3. Final Answer:

   To simulate data retrieval without needing a real server -> Option D

4. Quick Check:

   Mocking = Simulate data fetching [OK]

Hint: Mocking means faking data to test without a real server [OK]

Common Mistakes:

• Thinking mocking speeds up production
• Confusing mocking with data storage
• Assuming mocking encrypts data

2. Which of the following is the correct way to create a mock async data fetch function in Next.js?

easy

A. async function fetchData() { return new Promise(resolve => setTimeout(() => resolve({ data: [] }), 1000)); }

B. const fetchData = () => { return { data: [] }; }

C. function fetchData() { setTimeout(() => { return { data: [] }; }, 1000); }

D. const fetchData = async () => { return setTimeout(() => ({ data: [] }), 1000); }

Solution

1. Step 1: Check async function syntax

   async function fetchData() { return new Promise(resolve => setTimeout(() => resolve({ data: [] }), 1000)); } correctly returns a Promise that resolves after 1 second with data.

2. Step 2: Identify incorrect patterns

   const fetchData = () => { return { data: [] }; } is synchronous, C does not return a Promise, D returns timeout ID, not data.

3. Final Answer:

   async function fetchData() { return new Promise(resolve => setTimeout(() => resolve({ data: [] }), 1000)); } -> Option A

4. Quick Check:

   Async + Promise + delay = async function fetchData() { return new Promise(resolve => setTimeout(() => resolve({ data: [] }), 1000)); } [OK]

Hint: Async functions must return a Promise to mock delays [OK]

Common Mistakes:

• Returning data synchronously without Promise
• Using setTimeout without Promise
• Returning timeout ID instead of data

3. Given this mock fetch function in Next.js:

async function fetchData() {
  return new Promise(resolve => setTimeout(() => resolve({ users: ["Alice", "Bob"] }), 500));
}

fetchData().then(data => console.log(data.users));

What will be logged to the console?

medium

A. Promise { <pending> }

B. undefined

C. ["Alice", "Bob"]

D. Error: fetchData is not a function

Solution

1. Step 1: Understand the Promise resolution

   The function returns a Promise that resolves after 500ms with an object containing users array.

2. Step 2: Check the then callback

   The then callback logs data.users, which is ["Alice", "Bob"].

3. Final Answer:

   ["Alice", "Bob"] -> Option C

4. Quick Check:

   Promise resolves to users array logged [OK]

Hint: Promise.then logs resolved data, not the Promise itself [OK]

Common Mistakes:

• Expecting immediate data without waiting
• Logging the Promise object instead of resolved value
• Confusing function call with undefined

4. Identify the error in this mock data fetch function:

async function fetchData() {
  setTimeout(() => {
    return { data: [1, 2, 3] };
  }, 1000);
}

medium

A. setTimeout cannot be used inside async functions

B. The function does not return a Promise, so data is undefined

C. The return statement inside setTimeout is invalid syntax

D. The function should not be async if using setTimeout

Solution

1. Step 1: Analyze return behavior

   The function does not return anything; setTimeout callback's return is ignored.

2. Step 2: Understand async function expectations

   Async functions should return a Promise; here, no Promise is returned, so caller gets undefined.

3. Final Answer:

   The function does not return a Promise, so data is undefined -> Option B

4. Quick Check:

   Async function must return Promise, not just use setTimeout [OK]

Hint: Return a Promise to deliver data after delay [OK]

Common Mistakes:

• Assuming setTimeout return affects function return
• Thinking async forbids setTimeout
• Ignoring that async functions return Promises

5. You want to mock fetching user profiles with a delay and filter out users with empty names. Which code correctly mocks this in Next.js?

hard

A. async function fetchUsers() {
const users = [{ name: "", id: 1 }, { name: "Eve", id: 2 }];
return new Promise(resolve => setTimeout(() => resolve(users.filter(u => u.name)), 1000));
}

B. function fetchUsers() {
return [{ name: "", id: 1 }, { name: "Eve", id: 2 }].filter(u => u.name);
}

C. async function fetchUsers() {
const users = [{ name: "", id: 1 }, { name: "Eve", id: 2 }];
return users.filter(u => u.name);
}

D. async function fetchUsers() {
return new Promise(resolve => setTimeout(() => resolve([{ name: "", id: 1 }, { name: "Eve", id: 2 }]), 1000));
}

Solution

1. Step 1: Identify filtering and delay

   async function fetchUsers() { const users = [{ name: "", id: 1 }, { name: "Eve", id: 2 }]; return new Promise(resolve => setTimeout(() => resolve(users.filter(u => u.name)), 1000)); } filters out users with empty names and returns a Promise resolving after 1 second.

2. Step 2: Check other options

   A returns unfiltered data with delay, B performs filtering but is synchronous and non-async without delay, C returns filtered data synchronously without delay.

3. Final Answer:

   async function fetchUsers() { const users = [{ name: "", id: 1 }, { name: "Eve", id: 2 }]; return new Promise(resolve => setTimeout(() => resolve(users.filter(u => u.name)), 1000)); } -> Option A

4. Quick Check:

   Filter then delay with Promise = async function fetchUsers() { const users = [{ name: "", id: 1 }, { name: "Eve", id: 2 }]; return new Promise(resolve => setTimeout(() => resolve(users.filter(u => u.name)), 1000)); } [OK]

Hint: Filter data before resolving Promise with delay [OK]

Common Mistakes:

• Not filtering data before resolving
• Returning data synchronously without delay
• Using non-async functions for async behavior