🎨 Pattern: How to configure mock API vs real backend API in frontend ap...

Date: 2026-02-05
Time: 04:40:40 UTC
Session: editor2-89.14
Agent: backend
Confidence: 95%
Status: ✅ Documented

📋 Decision Context

Question:

How to configure mock API vs real backend API in frontend apps?

Task: Not specified

🎯 Decision Made

Chosen:

Environment-based conditional: useMockApi flag controls interceptor chain

Options Considered:

1. Always use mock API in development
2. Always use real backend via proxy
3. Environment-based conditional: useMockApi flag controls interceptor chain
4. Separate app builds for mock vs real

💭 Reasoning

The pattern uses environment.useMockApi boolean to conditionally configure HTTP interceptors: withInterceptors(environment.useMockApi ? [mockHttpInterceptor, authInterceptor] : [authInterceptor]). When useMockApi=true, mockHttpInterceptor handles requests locally. When useMockApi=false (default for development), requests go through proxy to real backend-api. This is configured in app.config.ts and controlled by environment files. Project.json includes fileReplacements for 'mock' and 'production' configurations. IMPORTANT: editor2 monorepo has a real backend-api, so useMockApi should be false by default. The mock mode is for offline development only.

📁 Files Involved

• apps/gograb-admin/src/app/app.config.ts
• apps/gograb-dev/src/app/app.config.ts
• apps/gograb-admin/src/environments/environment.ts
• apps/gograb-admin/src/environments/environment.mock.ts
• apps/gograb-admin/project.json

🔗 Related

• Decision ID: dev_1770266440615_1if6scc
• Session: 89
• Workspace: editor2

Auto-generated by MCP Smart Consolidation