Repository pattern for data access in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the Repository pattern in data access?

The Repository pattern is a way to organize code that talks to data sources. It acts like a middleman between your app and the database, making data access simpler and easier to manage.

beginner

Why use the Repository pattern in Next.js apps?

Using the Repository pattern helps keep your data logic separate from UI code. This makes your app easier to test, maintain, and change without breaking other parts.

intermediate

How does a Repository class typically look in Next.js?

A Repository class usually has methods like getAll, getById, create, update, and delete. These methods handle fetching and saving data, hiding the details from the rest of the app.

intermediate

What is one benefit of using Repository pattern with Next.js API routes?

It lets API routes focus on handling requests and responses, while the Repository handles data tasks. This keeps code clean and easier to update or test.

intermediate

Can the Repository pattern help when switching databases?

Yes! Since data access is inside the Repository, you can change the database or data source without changing the rest of your app. Just update the Repository code.

What is the main role of a Repository in data access?

A To store user session data

B To handle user interface rendering

C To manage CSS styles

D To act as a middleman between the app and data sources

The Repository acts as a middleman between your app and the data sources, managing data access.

Which method would you expect in a Repository class?

A getAll()

B handleClick()

C renderUI()

D setState()

getAll() is a common Repository method to fetch all data records.

How does the Repository pattern help when changing databases?

A You only update the Repository code

B You rewrite all UI components

C You must change API routes

D It does not help with database changes

The Repository isolates data access, so only its code needs updating when changing databases.

In Next.js, where is the Repository pattern most useful?

A In React components for UI

B In CSS files

C Inside API route handlers

D In static HTML pages

Repositories are useful inside API routes to separate data logic from request handling.

Which is NOT a benefit of using the Repository pattern?

A Cleaner separation of concerns

B Direct manipulation of UI state

C Easier testing of data logic

D Simpler maintenance of data code

Repository pattern does not handle UI state; it focuses on data access.

Explain the Repository pattern and why it is useful in Next.js data access.

Think about how to keep data code organized and separate from UI code.

Describe how you would implement a simple Repository class in a Next.js app.

Focus on the structure and purpose of the Repository class.

Practice

1. What is the main purpose of using the Repository pattern in a Next.js application?

easy

A. To style components with CSS modules

B. To organize data access in one place for cleaner and reusable code

C. To handle routing between pages

D. To manage component state with hooks

Solution

1. Step 1: Understand the role of the Repository pattern

   The Repository pattern centralizes data access logic, separating it from UI code.

2. Step 2: Identify benefits in Next.js context

   This separation makes code cleaner, reusable, and easier to maintain.

3. Final Answer:

   To organize data access in one place for cleaner and reusable code -> Option B

4. Quick Check:

   Repository pattern = centralized data access [OK]

Hint: Repository pattern centralizes data access, not UI or styling [OK]

Common Mistakes:

• Confusing repository with UI state management
• Thinking repository handles routing
• Mixing repository with styling concerns

2. Which of the following is the correct way to define a simple repository class in Next.js using TypeScript?

easy

A. class UserRepository { async getAll() { return fetch('/api/users').then(res => res.json()) } }

B. function UserRepository() { return fetch('/api/users') }

C. const UserRepository = () => fetch('/api/users').json()

D. class UserRepository { getAll() { return fetch('/api/users').json() } }

Solution

1. Step 1: Check class syntax and async usage

   class UserRepository { async getAll() { return fetch('/api/users').then(res => res.json()) } } correctly defines a class with an async method returning parsed JSON from fetch.

2. Step 2: Identify errors in other options

   function UserRepository() { return fetch('/api/users') } is a function, not a class. const UserRepository = () => fetch('/api/users').json() incorrectly calls .json() directly on fetch result without awaiting. class UserRepository { getAll() { return fetch('/api/users').json() } } misses async and awaits, causing runtime error.

3. Final Answer:

   class UserRepository { async getAll() { return fetch('/api/users').then(res => res.json()) } } -> Option A

4. Quick Check:

   Async class method with fetch and json parsing = class UserRepository { async getAll() { return fetch('/api/users').then(res => res.json()) } } [OK]

Hint: Repository methods fetching data must be async and parse JSON [OK]

Common Mistakes:

• Forgetting async keyword on methods
• Calling .json() without awaiting fetch response
• Using function instead of class for repository

3. Given this repository method in Next.js, what will console.log(users) output?

class UserRepository {
  async getAll() {
    return [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]
  }
}

const repo = new UserRepository()
const users = await repo.getAll()
console.log(users)

medium

A. [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]

B. Promise { <pending> }

C. undefined

D. Error: await is only valid in async function

Solution

1. Step 1: Analyze the getAll method

   getAll returns a resolved array of user objects immediately (no fetch or delay).

2. Step 2: Understand await usage

   Await unwraps the Promise returned by async getAll, so users is the array itself.

3. Final Answer:

   [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }] -> Option A

4. Quick Check:

   Await unwraps async return value = array [OK]

Hint: Await unwraps async method result to actual data [OK]

Common Mistakes:

• Thinking users is a Promise object
• Forgetting await causes Promise logged
• Assuming undefined without return

4. Identify the error in this Next.js repository code snippet:

class ProductRepository {
  getAll() {
    const response = fetch('/api/products')
    return response.json()
  }
}

medium

A. json() method does not exist on response

B. fetch URL is incorrect

C. Missing async keyword and await for fetch and json calls

D. Class name should be lowercase

Solution

1. Step 1: Check fetch usage

   fetch returns a Promise, so response is a Promise, not the actual response object.

2. Step 2: Identify missing async/await

   To get JSON data, method must be async and await fetch and response.json() calls.

3. Final Answer:

   Missing async keyword and await for fetch and json calls -> Option C

4. Quick Check:

   Async fetch requires await to get response data [OK]

Hint: Always use async/await with fetch and response.json() [OK]

Common Mistakes:

• Not marking method async
• Not awaiting fetch or json()
• Assuming fetch returns data synchronously

5. You want to create a repository in Next.js that fetches user data and caches it to avoid repeated API calls. Which approach correctly applies the repository pattern with caching?

hard

A. class UserRepository {
async getAll() {
return fetch('/api/users').then(res => res.json())
}
}

B. function getAllUsers() {
return fetch('/api/users').then(res => res.json())
}

C. const cache = []
async function getAllUsers() {
if (cache.length) return cache
const res = await fetch('/api/users')
cache.push(...await res.json())
return cache
}

D. class UserRepository {
cache = null
async getAll() {
if (this.cache) return this.cache
const res = await fetch('/api/users')
this.cache = await res.json()
return this.cache
}
}

Solution

1. Step 1: Understand caching in repository context

   Caching should be encapsulated inside the repository class to keep data access logic together.

2. Step 2: Evaluate options for caching implementation

   class UserRepository { cache = null async getAll() { if (this.cache) return this.cache const res = await fetch('/api/users') this.cache = await res.json() return this.cache } } uses a class property to store cache and returns it if available, avoiding repeated fetch calls.

3. Step 3: Compare other options

   Options A and B do not implement caching. const cache = [] async function getAllUsers() { if (cache.length) return cache const res = await fetch('/api/users') cache.push(...await res.json()) return cache } uses an external cache variable, breaking encapsulation.

4. Final Answer:

   class UserRepository { cache = null async getAll() { if (this.cache) return this.cache const res = await fetch('/api/users') this.cache = await res.json() return this.cache } } -> Option D

5. Quick Check:

   Repository with internal cache property = class UserRepository { cache = null async getAll() { if (this.cache) return this.cache const res = await fetch('/api/users') this.cache = await res.json() return this.cache } } [OK]

Hint: Cache inside repository class to keep data logic together [OK]

Common Mistakes:

• Caching outside repository breaks encapsulation
• Not checking cache before fetching
• Using functions instead of class for caching