Apollo GraphQL Interceptor

Chrome расширение для перехвата, просмотра и модификации Apollo GraphQL запросов и мутаций в реальном времени.

Возможности

📡 Мониторинг операций

• Отслеживание всех GraphQL queries и mutations на странице
• Просмотр деталей: query, variables, response
• Фильтрация по типу операции и поиск по имени
• Индикатор подключения к Apollo Client

⚡ Перехват и модификация

• Подмена ответа сервера (mock response)
• Модификация переменных запроса (variables)
• Возврат GraphQL ошибок для тестирования
• Сохранение моков между сессиями

🔄 Real-time обновление

• Apply Live — мгновенное обновление Apollo Cache без перезагрузки
• Refetch — повторный запрос с новыми переменными
• Execute Mutation — выполнение мутации с кастомными переменными

🛠️ Debug API

Доступ через консоль браузера:

// Получить все данные
window.__APOLLO_INTERCEPTOR__.getAllData()

// Обновить кэш в реальном времени
window.__APOLLO_INTERCEPTOR__.update("QueryName", newData)

// Установить мок
window.__APOLLO_INTERCEPTOR__.setMock("QueryName", { data: {...} })

// Получить Apollo Client
window.__APOLLO_INTERCEPTOR__.getClient()

Установка

Для разработки

1. Откройте Chrome → chrome://extensions/
2. Включите "Режим разработчика" (Developer mode)
3. Нажмите "Загрузить распакованное расширение" (Load unpacked)
4. Выберите папку apollo-interceptor-extention

Использование

Мониторинг

1. Кликните на иконку расширения в панели браузера
2. Перейдите на страницу с Apollo Client
3. Операции автоматически появятся в списке
4. Зелёная точка = Apollo Client подключен

Подмена ответа (Mock)

1. Кликните на операцию в списке
2. Отредактируйте JSON в редакторе
3. Включите переключатель "Mock enabled"
4. Нажмите Apply Mock — мок будет использован при следующем запросе
5. Или нажмите Apply Live — данные обновятся мгновенно в UI

Симуляция ошибки

1. Выберите операцию
2. Нажмите Set Error — автоматически создаст мок с ошибкой

Модификация переменных

1. Перейдите на вкладку "Variables"
2. Отредактируйте JSON переменных
3. Включите "Mock vars" и нажмите Apply
4. Или нажмите Refetch для немедленного запроса с новыми переменными

Примеры

Mock ответа

{
  "user": {
    "id": "123",
    "name": "Test User",
    "__typename": "User"
  }
}

Mock ошибки

{
  "__error": true,
  "errors": [{
    "message": "Unauthorized",
    "extensions": { "code": "UNAUTHENTICATED" }
  }],
  "data": null
}

Структура проекта

apollo-interceptor-extention/
├── manifest.json      # Manifest V3
├── background.js      # Service Worker — хранение правил
├── content.js         # Content Script — мост между страницей и расширением
├── inject.js          # Инъекция в страницу — хук Apollo Client
├── popup/
│   ├── popup.html     # UI расширения
│   ├── popup.css      # Стили
│   └── popup.js       # Логика popup
└── icons/
    ├── icon.svg       # Исходник иконки
    ├── icon16.png
    ├── icon48.png
    ├── icon128.png
    └── generate.py    # Скрипт генерации PNG

Технические детали

Как работает перехват

1. inject.js внедряется в страницу и хукает window.__APOLLO_CLIENT__
2. Перехватываются методы query(), mutate(), watchQuery()
3. При наличии мока — возвращается мок вместо реального ответа
4. Данные отправляются в popup через postMessage → content script → background

Хранение данных

• chrome.storage.local — правила моков (сохраняются между сессиями)
• In-memory — операции (очищаются при закрытии вкладки)

Совместимость

• ✅ Chrome Manifest V3
• ✅ Apollo Client 2.x, 3.x
• ✅ Любые GraphQL клиенты через fetch fallback

Разрешения

Разрешение	Зачем нужно
storage	Сохранение правил моков
activeTab	Доступ к текущей вкладке
scripting	Инъекция скриптов
tabs	Получение ID вкладки
<all_urls>	Работа на любом сайте с GraphQL

Отладка

• Логи в консоли страницы: [Apollo Interceptor]
• Логи Service Worker: chrome://extensions/ → Details → Service Worker

Лицензия

MIT