Repository pattern

Learn the repository pattern.

Repository pattern

The repository pattern manages data access in a single place. The domain logic does not call fetch or the database directly; it asks a Repository for data.

This way, if the data source changes (REST to GraphQL), only the repository is updated; the domain is unaffected. In tests the repository is mocked; no real API call happens.

Mockability

The biggest gain of the repository pattern is testability. Instead of a real API call, a fake (mock) repository is supplied; the test runs fast and stable.

The mock repository implements the same interface; when getUser is called, it returns a fixed object. This way the test does not depend on network or server state.

Exercise Write ApiUserRepository

Write an ApiUserRepository class or object. It should implement the UserRepository interface; its getUser(id) method calls fetch. Export it with export.

Show example solution

// Define ApiUserRepository here
const ApiUserRepository = {
  getUser: (id) => fetch(`/api/users/${id}`).then(r => r.json())
};

export default ApiUserRepository;

Test yourself

What does the repository pattern abstract?
- The data source
- UI components
- Style computation
- Navigation flow
Show answer

Navigation flow — The repository abstracts the data source.

Write the mock repository return

const mockRepo = {
  getUser: async (id) => { return ____ }
};

Show answer

const mockRepo = {
  getUser: async (id) => { return { id, name: 'Ali' } }
};

Match the repository pieces

Repository

Data access abstraction
Interface

Contract
Mock

Fake data
Domain

Business logic

Next lesson: Dependency injection

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies