Как дебажить АПИ запросы apollo?

Для начала следует разобраться в самом механизме обмена данными, откуда что вообще берется. Ведь у нас не классическая монолитная CMS на php, где фронт может даже не заработать, если нет подключения к базе данных, а Headless CMS + API-first CMS. То есть условно у нас есть отдельно API и отдельно фронт. В нашей текущей системе фронт все свои данные берет у API-сервера. В свою очередь API-сервер может брать данные у других API-серверов, может из БД тянуть, то есть там своя цепочка может выстраиваться. Но это не очень важно. Когда мы работаем с API, мы не должны задумываться о том, откуда там данные берутся. Нам надо всего лишь запросить нужные нам данные и убедиться, что API-сервер нам эти данные отдает. Для этого запускаем наш проект и заходим http://localhost:3000/api/ Там должен запуститься GraphQL Playground. Только не забываем в нем подправить УРЛ эндпоинта (по умолчанию он ставит http://localhost:3000, а не http://localhost:3000/api/). Там пишем наш GraphQL-запрос и смотрим что он нам возвращает. Если все возвращает как ожидалось, вот тогда только переходим к мониторингу фронта. Для работы с фронтом в повседневке, я рекомендую использовать браузер google chrome. Не потому что он мне очень нравится и я фанат гугла, а просто потому что в других я не нехожу для себя всех необходимых рабочих средств. Но каждый себе сам выбирает свой инструмент, но мои здесь рекомендации будут касатсья именно его. В браузер ставим два расширения: 1. react-dev-tools 2. apollo-dev-tools После установки, если у вас на странице уже открыто dev-tools, надо закрыть и по новой открыть. Первый вообще маст-хэв. Второй я очень редко использую, но для новичков он будет крайне полезным. Вот что в нем можно увидеть: То есть можно увидеть все дерево реакт-компонентов (не HTML DOM, а именно рекат-компоненты, которые рендерят эту конечную страницу). В них же можно увидеть входящие свойства, текущие состояния и т.п. В том числе мы видим ApolloProvider и его ApolloProvider.Provider, который пробрасывает свои данные через контекст вглубь приложения и там любой заинтересованный компонент может подписаться на его данные. Если с контекстами не знакомы еще, обязательно изучите React Context. Если на сайте используется Apollo-client, то скорее всего его провайдер обязательно будет присутствовать, и скорее всего он будет один. И вот в нем мы видим данные, которые сейчас имеются в его кеше. Но там сложно разобраться почему эти данные там есть (то есть какие запросы были выполнены, хотя эта информация там тоже есть), к тому же если запрос указан некешируемый, то его результат и вовсе не будет здесь присутствовать. И есть еще момент: у нас SPA (Single Page Application), к тому же используется SSR, то есть отрисовка на сервере. Нам это сильно усложняет отладу АПИ-запросов по той причине, что при первом заходе на страницу (когда мы еще только указали адрес в браузере), у нас API-данные могут быть запрошены еще на стороне сервера и на страницу записаться в виде JSON, и при ицнициализации аполло-клиента, эти данные попадают в его кеш, и далее, когда в реакте срабатывают вызовы API-запросов через аполло, если для этих запросов есть уже данные в кеше, то на API-сервер такие запросы не отправляются. То есть в таком случае не получается открыть мониторинг сети и посмотреть какие запросы полетели на сервер и какие ответы пришли. И вот как раз в таких случаях и помогает указанный второй инструмент - apollo-dev-tools. Когда он установлен, в dev-tools браузера появляется еще одна вкладка, где можно увидеть все активные GraphQL-запросы и их ответы, а так же данные кеша. Если это не помогло конкретно в вашей ситуации, спрашивайте в комментариях.

Спасибо!!! Изучаю

Контексты просмотрел - удобная штука. А вот запросы так и не появились: причем в Playground ответ приходит. Как можно понять, где болячка сидит?

Тогда уже становится сильно сложнее (тем более что у меня-то ОК работает). Придется вручную искать где именно данные не доходят. И бывают очень неожиданные места (типа нескольких версий одной и той же зависимости). Первый вопрос: в терминале ошибок никаких нет? В терминале должен быть более полный лог серверных ошибок. Второе, копать данные. Вот здесь выполняется запрос и набиваются данные городов: https://github.com/Pivkarta/pivkarta.ru-2/blob/adca23468def277145daefa312cc814aee06be0d/src/pages/_App/index.tsx#L167-L183 На 176 строке добавь console.log('appData.data', appData.data) и обнови страницу. В терминале должно быть типа такого: Если будет null, значит данные по API не пришли вообще. Но должна быть тогда ошибка по идее.

Все понял: я же города здесь http://localhost:3000 ищу, а они тут http://localhost:3000/city Спасибо!! Изучаю код

Этот код выполняется для всех страниц, потому что это _App. Это обертка для всего приложения. Потому что города нужны на всех страницах (в том числе в главном меню). Поэтому сделай то, что я написал выше и сообщи результат.

Ошибки в консоле есть, но ругается на отсутсвие метриковского информера (GET https://mc.yandex.ru/informer/26848689/3_1_FFFFFFFF_EFEFEFFF_0_pageviews 403), вряд ли это причина. ПРи перезапуске появилая такая ошибка: http://localhost:3000/_next/static/webpack/22a985d3c3f801c2b83a.hot-update.json 404 (Not Found) console.log('appData.data', appData.data) - все отдал, все города)

Да, метрика 403 ошибка никак не влияет. А вот http://localhost:3000/_next/static/webpack/22a985d3c3f801c2b83a.hot-update.json 404 (Not Found)... У меня hot-update.json вообще нет в запросах. Возможно это сигнализирует об ошибках на стороне фронта. У тебя в браузере вывод ошибок не отключен? В любом случае, надо проверить рендер без JS. А то так часто бывает, что с сервера прилетает нормальный контент, потом срабатывает JS, компоненты переписываются и без данных пропадает часть контента. Поставь вот этот плагин: chrome://extensions/?id=geddoclleiomckbhadiaipdggiiccfje Он позволяет удобно и быстро включать/отключать JS Или в настройках dev-tools отключи JS (Disable JavaScript). И обнови страницу http://localhost:3000/city Суть эксперимента исключить вероятность ошибки в браузере. То есть если проблема не исчезнет, значит все-таки проблема в ядре. И какая у тебя версия ноды? node -v

Нода 12.14.1 Без JS города на месте. Видимо все ок)

Вот. Сдвинулись с места. Занеси это все в склерозник получше, это очень часты путь отладки (и очень важно понимать когда что у тебя на сервере срабатывает, а когда в браузере). Теперь остается понять почему у тебя не работает в браузере. Зайди во вкладку "Сеть", убери фильтры (если выставлены), обнови страницу и поищи сломанные запросы. Бывает блокировщик рекламы срабатывает или еще что-нибудь.

И да, обнови ноду хотя бы до 14 версии (а лучше 15, как у меня). Здесь уже не важно по идее, но все же.

У меня прям на информер метрики и ругается: 403 и все тут: Request URL: https://mc.yandex.ru/informer/26848689/3_1_FFFFFFFF_EFEFEFFF_0_pageviews Request Method: GET Status Code: 403 Remote Address: [2a02:6b8::1:119]:443 Referrer Policy: no-referrer-when-downgrade

Да информер здесь точно не при чем. Вот что сделай: проверь уникальность пакетов. yarn why react Вот это ошибка: Видишь тут два пакета найдено? 17.0.2 и 15.7.0 То же самое и с react-dom, тоже два. Такого с ними не должно быть. Ты вообще yarn install делал? У тебя yarn.lock не менялся? (тот же, что и в репе был?). Я сейчас пофиксю это, может проблема пропадет.

Выкатил коммит: https://github.com/Pivkarta/pivkarta.ru-2/commit/61d5167e9a6db3ff733fad710373197d308ea01d Самое важно вот это: Это накладывает ограничения на устанавливаемые зависимости зависимостей. Но важный момент: если в самом пакете в зависимостях прописана более высокая версия, можно получить в итоге две зависимости (внутренних компонентов, ограниченную этим, и свою). Обновись, выполни yarn install, перезапусти фронт и проверь работу.

Все сделал, но информер как ругался, так и ругается. В терминале: Duplicate page detected. pages/city.tsx and pages/city/index.ts both resolve to /city. В консоли браузере - GET http://localhost:3000/_next/static/webpack/6720c27984c5f004e2fd.hot-update.json 404 (Not Found)

Да, дубляжь был. Убрал. Но он не мог влиять. Ты ноду обновил?

Обновляю

Обновил до 14 - все ровно также

Увидел, что у меня ярн 10: может это?

Это вряд ли. Он просто менеджер зависимостей. Ладно, пока забей тогда. Ставь TeamViewer. Сегодня некогда, но на днях найду время, подключусь к тебе, посмотрю сам быстро еще несколько мест.

Ок, принято

Вот пробуй в докере запуститься.