backend-mocks-v2

A GraphQL mocking solution using mitmproxy to intercept and replace GraphQL responses with predefined mock data.

Overview

This repository uses mitmproxy to intercept GraphQL requests and return mock responses from JSON files. This is useful for:

• Frontend development when backend APIs are unavailable
• Testing with consistent, controlled data
• Simulating different response scenarios

Installation

Install mitmproxy

# Using pip
pip install mitmproxy

# Using homebrew (macOS)
brew install mitmproxy

# Using apt (Ubuntu/Debian)
sudo apt install mitmproxy

Certificate Setup for HTTPS

To intercept HTTPS traffic, you need to install mitmproxy's certificate:

1. Start mitmproxy (this generates the certificate):

   mitmproxy

2. Configure your browser to use the proxy:

   Launch Chrome with proxy settings:

   "C:\Program Files\Google\Chrome\Application\chrome.exe" --proxy-server=http://127.0.0.1:8080

3. Install the certificate:

   Navigate to http://mitm.it/ and follow the instructions there to download and install the certificate for your operating system

Usage

1. Configure Mock Responses

Add your GraphQL mock responses to the mocks/ directory:

// mocks/get_tokens_response.json
{
  "data": {
    "tokens": [
      { "id": "1", "name": "Token 1" },
      { "id": "2", "name": "Token 2" }
    ]
  }
}

2. Update Response Mapping

Edit graphql_replace_file.py to map GraphQL operation names to mock files:

RESPONSE_MAP = {
    "GetTokens": "get_tokens_response.json",
    "GetUsers": "get_users_response.json"
}

3. Start mitmproxy

mitmproxy -s graphql_replace_file.py

4. Configure Browser

Launch Chrome with proxy settings (see chrome.md for details):

"C:\Program Files\Google\Chrome\Application\chrome.exe" --proxy-server=http://127.0.0.1:8080

5. Test Your Application

Navigate to your application in the proxied browser. GraphQL requests matching the configured operations will be intercepted and replaced with your mock responses.

Files

• graphql_replace_file.py - Main mitmproxy script that intercepts GraphQL requests
• mocks/ - Directory containing JSON mock response files
• chrome.md - Instructions for running Chrome with proxy configuration

Configuration

The script intercepts requests to /graphql by default. To change this, modify the GRAPHQL_ENDPOINT variable in graphql_replace_file.py.