Repository pattern for data access in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the repository class correctly.

NextJS

import [1] from '@/repositories/UserRepository';

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

AuserRepository

BUserRepository

CUser_repo

DrepositoryUser

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect casing in the import name.

Using a different variable name than the exported class.

The repository class is named UserRepository and should be imported with the exact name.

2fill in blank

medium

Complete the code to create a new instance of the repository.

NextJS

const userRepo = new [1]();

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

AUserRepository

BuserRepository

CRepositoryUser

Duser_repo

Attempts:

3 left

💡 Hint

Common Mistakes

Using a lowercase or incorrect class name.

Trying to instantiate a variable instead of a class.

The instance must be created from the UserRepository class with exact casing.

3fill in blank

hard

Fix the error in the method call to fetch all users.

NextJS

const users = await userRepo.[1]();

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

AgetUsers

BfetchUsers

CfindAll

DgetAllUsers

Attempts:

3 left

💡 Hint

Common Mistakes

Using a method name that does not exist in the repository.

Using a method name that implies fetching but is not defined.

The repository method to get all users is named findAll following common repository patterns.

4fill in blank

hard

Fill both blanks to define a repository method that finds a user by ID.

NextJS

async findById([1]) {
  return await this.[2].findOne({ where: { id } });
}

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

Aid

BuserId

Crepository

Ddb

Attempts:

3 left

💡 Hint

Common Mistakes

Using a parameter name that does not match the query.

Using the wrong repository instance name.

The method parameter is id and the repository instance is commonly named repository.

5fill in blank

hard

Fill all three blanks to create a new user using the repository pattern.

NextJS

async createUser([1]) {
  const newUser = this.[2].create([3]);
  await this.repository.save(newUser);
  return newUser;
}

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

AuserData

Brepository

Ddb

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent variable names for user data.

Using a wrong repository instance name.

The method takes userData as input, uses this.repository to create, and passes userData to create.

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