Repository pattern for data access in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Next.js repository component render?

Given a repository class that fetches user data, what will the component display?

NextJS

class UserRepository {
  async getUser() {
    return { id: 1, name: 'Alice' };
  }
}

import React, { useEffect, useState } from 'react';

export default function UserProfile() {
  const [user, setUser] = useState(null);
  useEffect(() => {
    const repo = new UserRepository();
    repo.getUser().then(setUser);
  }, []);
  if (!user) return <p>Loading...</p>;
  return <p>{`User: ${user.name}`}</p>;
}

A Component throws an error

B <p>User: undefined</p>

C <p>Loading...</p> forever

D <p>Loading...</p> initially, then <p>User: Alice</p>

💡 Hint

Think about when the data is fetched and how state updates.

The component starts with user as null, so it shows 'Loading...'. After getUser() resolves, user updates and the component shows 'User: Alice'.

📝 Syntax

intermediate

Which option correctly implements a Next.js repository method to fetch posts?

Choose the correct syntax for an async method in a repository class that fetches posts from an API.

NextJS

class PostRepository {
  async fetchPosts() {
    // implementation
  }
}

A fetchPosts() { const res = await fetch('/api/posts'); return res.json(); }

B async fetchPosts() { const res = await fetch('/api/posts'); return res.json(); }

C async fetchPosts() { const res = fetch('/api/posts'); return res.json(); }

D async fetchPosts() { const res = await fetch('/api/posts'); return res.text(); }

💡 Hint

Remember to use await with async calls and return the JSON data.

Option B correctly marks the method as async, awaits the fetch call, and returns the parsed JSON. Option B misses async keyword, so await causes syntax error. Option B misses await on fetch, so res.json() is called on a Promise, causing error. Option B returns text instead of JSON.

🔧 Debug

advanced

Why does this Next.js repository method cause a runtime error?

Identify the cause of the error in this repository method.

NextJS

class ProductRepository {
  async getProducts() {
    const response = await fetch('/api/products');
    if (!response.ok) throw new Error('Failed to fetch');
    return response.json;
  }
}

A It returns response.json instead of calling response.json()

B It does not check if response.ok is true

C fetch is missing await keyword

D The method is not marked async

💡 Hint

Look carefully at how the JSON data is returned.

The method returns response.json which is a function reference, not the parsed JSON data. It should call response.json() to get the data.

❓ state_output

advanced

What is the state value after this Next.js repository fetch in a React component?

Given this component using a repository, what is the value of data after the effect runs?

NextJS

class CommentRepository {
  async fetchComments() {
    return [{ id: 1, text: 'Hi' }, { id: 2, text: 'Hello' }];
  }
}

import React, { useEffect, useState } from 'react';

export default function Comments() {
  const [data, setData] = useState([]);
  useEffect(() => {
    const repo = new CommentRepository();
    repo.fetchComments().then(setData);
  }, []);
  return null;
}

A [{ id: 1, text: 'Hi' }, { id: 2, text: 'Hello' }]

B []

C null

D [{ id: 1, text: 'Hi' }]

💡 Hint

Consider what the repository method returns and how state is set.

The repository method returns an array of two comment objects. The component sets data to this array after the promise resolves.

🧠 Conceptual

expert

Which statement best describes the benefit of using the repository pattern in Next.js data access?

Choose the most accurate explanation of why the repository pattern is useful in Next.js applications.

A It replaces React hooks for managing component state with a global store.

B It automatically caches all API responses to improve performance without extra code.

C It centralizes data fetching logic, making it easier to maintain and test data access separately from UI components.

D It forces all data fetching to happen on the server side only, preventing client-side requests.

💡 Hint

Think about separation of concerns and code organization.

The repository pattern groups data access code in one place. This separation helps maintainability and testing. It does not automatically cache data, replace hooks, or restrict fetching to server side only.