Mocking data fetching in NextJS - Step-by-Step Execution

Concept Flow - Mocking data fetching

Start Component Render

↓

Call fetch function

↓

Is mock enabled?

Yes→Return mock data

↓

Return real data

↓

Use data in component

↓

Render UI with data

↓

End

The component starts rendering, calls a fetch function that checks if mock data should be used. If yes, it returns mock data immediately; otherwise, it fetches real data. Then the component uses this data to render the UI.

Execution Sample

NextJS

export async function fetchData(mock = false) {
  if (mock) {
    return { name: 'Mock User', age: 30 };
  }
  const res = await fetch('/api/user');
  return res.json();
}

This function fetches user data. If mock is true, it returns fake data immediately; otherwise, it fetches real data from an API.

Execution Table

Step	Action	mock parameter	Data Returned	Notes
1	Call fetchData(mock=false)	false	Calls fetch('/api/user')	No mock, real fetch starts
2	Await fetch response	false	Response object	Waiting for real data
3	Parse JSON from response	false	{ name: 'Real User', age: 25 }	Real data received
4	Return data to component	false	{ name: 'Real User', age: 25 }	Component uses real data
5	Call fetchData(mock=true)	true	{ name: 'Mock User', age: 30 }	Mock enabled, returns mock data immediately
6	Return data to component	true	{ name: 'Mock User', age: 30 }	Component uses mock data
7	End	-	-	No further actions

💡 Execution stops after returning data to the component either from mock or real fetch.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 5	Final
mock	false	false	false	true	true
data	undefined	fetch response pending	{ name: 'Real User', age: 25 }	{ name: 'Mock User', age: 30 }	{ name: 'Mock User', age: 30 }

Key Moments - 2 Insights

Why does the function return mock data immediately when mock=true?

Because the if condition at step 5 detects mock=true and returns the mock object without waiting for any fetch, as shown in execution_table row 5.

What happens when mock=false in terms of data fetching?

The function performs a real fetch call to the API, waits for the response, parses JSON, and then returns real data, as detailed in execution_table rows 1 to 4.

Visual Quiz - 3 Questions

Look at the execution table, what data is returned at step 3?

A { name: 'Real User', age: 25 }

B { name: 'Mock User', age: 30 }

C fetch response object

D undefined

💡 Hint

Check the 'Data Returned' column at step 3 in the execution_table.

At which step does the function return mock data?

A Step 2

B Step 5

C Step 4

D Step 6

💡 Hint

Look for the step where mock=true and mock data is returned in the execution_table.

If mock parameter is always false, what changes in the variable_tracker?

A data becomes mock data at final

B mock changes to true after step 3

C mock stays false, data never becomes mock data

D mock toggles between true and false

💡 Hint

Refer to the 'mock' variable values in variable_tracker when mock=false.

Concept Snapshot

Mocking data fetching in Next.js:
- Use a parameter or flag to decide mock vs real fetch
- If mock enabled, return fake data immediately
- Else, fetch real data asynchronously
- Component uses returned data to render UI
- Helps test UI without real backend calls

Full Transcript

This visual execution shows how a Next.js data fetching function can return either mock data or real data based on a parameter. When the mock flag is true, the function returns a predefined object immediately, skipping any network call. When false, it performs a real fetch to an API endpoint, waits for the response, parses JSON, and returns the real data. The component then uses this data to render the UI. This approach helps developers test UI components without relying on backend availability or network conditions.

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