Repository pattern for data access in NextJS - Step-by-Step Execution

Concept Flow - Repository pattern for data access

Start

↓

Component calls Repository

↓

Repository abstracts data source

↓

Repository fetches data (API/DB)

↓

Repository returns data to Component

↓

Component renders UI with data

↓

End

The component asks the repository for data. The repository hides how data is fetched and returns it. The component then shows the data.

Execution Sample

NextJS

export async function getUsers() {
  const res = await fetch('/api/users');
  return res.json();
}

export default async function Users() {
  const users = await getUsers();
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

This code shows a repository function fetching users and a component rendering them.

Execution Table

Step	Action	Evaluation	Result
1	Component Users starts rendering	Calls getUsers()	Waiting for data
2	getUsers() fetches '/api/users'	Fetch promise resolves	Response object received
3	getUsers() calls res.json()	Parses JSON body	Array of user objects
4	getUsers() returns user array	Users component receives data	users = [{id:1,name:'Alice'}, {id:2,name:'Bob'}]
5	Users component maps users	Creates <li> for each user	<ul><li>Alice</li><li>Bob</li></ul> rendered
6	Rendering complete	UI shows user list	User names visible on page

💡 Rendering ends after users are fetched and UI is updated

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
users	undefined	undefined	Array of user objects	[{id:1,name:'Alice'},{id:2,name:'Bob'}]	[{id:1,name:'Alice'},{id:2,name:'Bob'}]

Key Moments - 3 Insights

Why does the component wait for getUsers() before rendering?

Because getUsers() is async and returns a promise, the component awaits it to get actual data before rendering the list (see execution_table step 1 and 4).

How does the repository hide data source details?

The component only calls getUsers() without knowing it fetches from '/api/users'. This abstraction is shown in execution_table step 2 and 3.

What happens if fetch fails?

In this example, errors are not handled, so the component would wait indefinitely or crash. Proper error handling should be added in the repository.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'users' after step 3?

A Array of user objects

B undefined

C Response object

D Empty array

💡 Hint

Check variable_tracker column 'After Step 3' for 'users'

At which step does the component receive the actual user data?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

See execution_table step 4 where users are assigned

If the fetch URL changes inside getUsers(), how does it affect the component?

A Component code must change

B Component code stays the same

C Component breaks immediately

D Component rerenders twice

💡 Hint

Repository pattern hides data source changes from component (see concept_flow)

Concept Snapshot

Repository pattern hides data fetching details.
Component calls repository functions to get data.
Repository fetches from API or DB internally.
Component only handles returned data.
This keeps code clean and easy to maintain.

Full Transcript

The repository pattern separates data access from UI components. The component calls a repository function like getUsers() to get data. The repository fetches data from an API endpoint and returns it as JSON. The component waits for this data, then renders it in a list. This pattern hides how data is fetched, so the component code stays simple and focused on UI. The execution table shows each step: component starts, repository fetches, data is parsed, component receives data, and finally renders the list. Variables like 'users' start undefined and get assigned after data arrives. Beginners often wonder why the component waits for data or how the repository hides details. The key is the async call and abstraction. If the data source changes, only the repository code needs updating, not the component. This makes apps easier to maintain and test.