Запускаю проект и не могу понять, идут запросы в бд или нет. Подскажите ,как правильно контролировать приходьт ли ответы. И уходят ди запросы...
Сам проект: https://github.com/Pivkarta/pivkarta.ru-2
Для локального запуска надо его склонировать, создать .env с
Для начала следует разобраться в самом механизме обмена данными, откуда что вообще берется. Ведь у нас не классическая монолитная 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. Не потому что он мне очень нравится и я фанат гугла, а просто потому что в других я не нехожу для себя всех необходимых рабочих средств. Но каждый себе сам выбирает свой инструмент, но мои здесь рекомендации будут касатсья именно его.
В браузер ставим два расширения:
После установки, если у вас на странице уже открыто 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) и обнови страницу. В терминале должно быть типа такого:
appData.data {
cities: [
{
__typename: 'City',
id: '4836292410beb87410d1f6a60',
name: 'Анадырь',
alias: 'anadyir',
lat: 64.734816,
lng: 177.514745
},
Если будет 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 не менялся? (тот же, что и в репе был?).
Я сейчас пофиксю это, может проблема пропадет.
Самое важно вот это:
"resolutions": {
"react": "^17.0.1",
"react-dom": "^17.0.1",
Это накладывает ограничения на устанавливаемые зависимости зависимостей. Но важный момент: если в самом пакете в зависимостях прописана более высокая версия, можно получить в итоге две зависимости (внутренних компонентов, ограниченную этим, и свою).
Обновись, выполни 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. Сегодня некогда, но на днях найду время, подключусь к тебе, посмотрю сам быстро еще несколько мест.
Ок, принято