RichText

Алесандр, ошибка в описании задачи. Перешел в подсказку, там в решении другие коды цветов.

Алесандр, ошибка в описании задачи. Перешел в подсказку, там в решении другие коды цветов. У меня выполнилось.

Алесандр, ошибка в описании задачи. Перешел в подс

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

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

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

Олег, вот опять ты пытаешься получить магию и считаешь, что компьютер тебя неправильно понимает. Я тебе уже говорил об этом: компьютер тебя понимает ровно на столько, на сколько ты изъяснился с ним. А изъясниться с ним ты пока что можешь только кодом. Вот и надо код смотреть, а не твои желания. Точнее при написании кода ты, конечно же, должен учитывать свои желания, но конечный результат надо смотреть по написанному коду, и если что-то работает не так, как ты хотел, то скорее всего ты код неправильно написал, а не компьютер тебя не так понял.

> Я же из документа выбираю конкретный селектор, при чем здесь весь документ?

Это две, совершенно не связанные друг с другом операции. 

Этот код можно написать вот так, чтобы было понятней. 

Как видишь, handler как бы и не имеет отношения к document. Просто документу прописывается "При клике вызови handler". 

Соответственно, если ты хочешь, чтобы обработчик срабатывал именно по кнопке, то и событие надо навешивать на кнопку.

>> В данном случае не нужны все кнопки, нужна конкретно одна кнопка.

Вот в данном случае и будет одна кнопка. Но только одна и самая первая. Не думаю, что ты хотел именно этого. Скорее всего ты хотел обрабатывать клики по любой кнопке, просто знать на какой именно клик сработал. И именно поэтому я и говорил использовать цикл, а в нем навесить по ивенту на каждую кнопку. Пример 

Вот здесь на каждую кнопку будет навешен один и тот же хендлер и срабатывать он будет на каждой кнопке в отдельности. А в самом хендлере из объекта события ты вытащишь инстанс конкретной ноды (e.target), и из нее уже можешь получить все нужные тебе данные. 

Олег, вот опять ты пытаешься получить магию и считаешь, что компьютер тебя неправильно понимает. Я тебе уже говорил об этом: компьютер тебя понимает ровно на столько, на сколько ты изъяснился с ним. А изъясниться с ним ты пока что можешь только кодом. Вот и надо код смотреть, а не твои желания. Точнее при написании кода ты, конечно же, должен учитывать свои желания, но конечный результат надо смотреть по написанному коду, и если что-то работает не так, как ты хотел, то скорее всего ты код неправильно написал, а не компьютер тебя не так понял. > Я же из документа выбираю конкретный селектор, при чем здесь весь документ? Это две, совершенно не связанные друг с другом операции. Этот код можно написать вот так, чтобы было понятней. Как видишь, handler как бы и не имеет отношения к document. Просто документу прописывается "При клике вызови handler". Соответственно, если ты хочешь, чтобы обработчик срабатывал именно по кнопке, то и событие надо навешивать на кнопку. >> В данном случае не нужны все кнопки, нужна конкретно одна кнопка. Вот в данном случае и будет одна кнопка. Но только одна и самая первая. Не думаю, что ты хотел именно этого. Скорее всего ты хотел обрабатывать клики по любой кнопке, просто знать на какой именно клик сработал. И именно поэтому я и говорил использовать цикл, а в нем навесить по ивенту на каждую кнопку. Пример Вот здесь на каждую кнопку будет навешен один и тот же хендлер и срабатывать он будет на каждой кнопке в отдельности. А в самом хендлере из объекта события ты вытащишь инстанс конкретной ноды (e.target), и из нее уже можешь получить все нужные тебе данные.

Олег, вот опять ты пытаешься получить магию и счит

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

Имел в виду именно схему редактирования, а не прям админку-админку))

Имел в виду именно схему редактирования, а не прям

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

Календарь задач на сайте freecode.academy

Обновляю

Да информер здесь точно не при чем. 

Вот что сделай: проверь уникальность пакетов. 

Image

Видишь тут два пакета найдено? 17.0.2 и 15.7.0

То же самое и с react-dom, тоже два. Такого с ними не должно быть.

Ты вообще yarn install делал? У тебя yarn.lock не менялся? (тот же, что и в репе был?).

Я сейчас пофиксю это, может проблема пропадет. 

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

Да информер здесь точно не при чем. Вот что сделай

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

Досадная ошибка. Явно проблема перевода. Поставил задачку.

Досадная ошибка. Явно проблема перевода. Поставил

Дима, лучше ставь задачи по факту. То есть если ты не знаешь какие именно сегодня-завтра стоят задачи по проекту, пусть он даже и на поддержке, то лучше вообще задачи не ставь. На счет временнЫх ресурсов у меня есть отдельные мысли, я их позже буду реализовывать. 

Дима, лучше ставь по факту. То есть если ты не зна

Ок, принято

MODX + React + NextJS + Prisma-2 + Nexus. gorodskie-bani.ru v3

Да, метрика 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

Суть эксперимента исключить вероятность ошибки в браузере. То есть если проблема не исчезнет, значит все-таки проблема в ядре.  И какая у тебя версия ноды?

Да, метрика 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

Да, метрика 403 ошибка никак не влияет. А вот http

Я как обычно придерживаюсь принципа больше во фронте редактировать. Где вижу - там и редактирую. Так что как таковой админки скорее всего не будет (как ее и здесь нет). А редактирование скоро сделаю.

Я как обычно придерживаюсь принципа больше во фрон

Да, формулировка размытая. Но выполнил.

Это вряд ли. Он просто менеджер зависимостей.

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

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

Это вряд ли. Он просто менеджер зависимостей. Ладн

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

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

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

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

Вот. Сдвинулись с места. Занеси это все в склерозн

Занятная задачка и занятные ошибки :)

В первую очередь лучше, конечно, документацию сразу искать в том же MDN. Вот: https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener (заодно прочитай и про removeEventListener(), его очень рекомендуется использовать).

Ты вызываешь метод addEventListener у элемента document. Таким образом слушателя ты добавляешь именно документу. В итоге, где бы ты ни кликнул в документ (который суть враппер для всего содержимого страницы), ты получишь вызов обработчика.

2. document.addEventListener() можно вызывать несколько раз (как и на любом другом элементе). Если ты искал все кнопки и в цикле попытался навесить на каждую из них обработчик (а навесил каждый раз на документ), то столько раз и вызов произошел по клику. Еще раз уточню, что вызывая  document.addEventListener(), ты добавляешь новый обработчик в массив обработчиков, а не перетираешь существующий. Выполни в консоли getEventListeners(document), увидишь там все обработчики, в том числе и на click.

3. Это уже чуть другой момент, но тоже важный. document.querySelector('elem-btn elem-btn--red to-basket ng-scope') - это поиск первого попавшегося элемента, не всех. Чтобы все найти и перечислить, надо юзать 

Занятная задачка и занятные ошибки :) В первую очередь лучше, конечно, документацию сразу искать в том же MDN. Вот: https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener (заодно прочитай и про removeEventListener(), его очень рекомендуется использовать). 1. document.addEventListener() Ты вызываешь метод addEventListener у элемента document. Таким образом слушателя ты добавляешь именно документу. В итоге, где бы ты ни кликнул в документ (который суть враппер для всего содержимого страницы), ты получишь вызов обработчика. 2. document.addEventListener() можно вызывать несколько раз (как и на любом другом элементе). Если ты искал все кнопки и в цикле попытался навесить на каждую из них обработчик (а навесил каждый раз на документ), то столько раз и вызов произошел по клику. Еще раз уточню, что вызывая  document.addEventListener(), ты добавляешь новый обработчик в массив обработчиков, а не перетираешь существующий. Выполни в консоли getEventListeners(document), увидишь там все обработчики, в том числе и на click. 3. Это уже чуть другой момент, но тоже важный. document.querySelector('elem-btn elem-btn--red to-basket ng-scope') - это поиск первого попавшегося элемента, не всех. Чтобы все найти и перечислить, надо юзать

Занятная задачка и занятные ошибки :) В первую оче

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

И да, обнови ноду хотя бы до 14 версии (а лучше 15

Супер! Главное, что данные не ухнули в лету) 

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

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

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

Обсуждение задания "Add a box-shadow to a Card-like Element"

Убрал длинные задачи - пропали данные за 03.03 и календаря, в таймере всё ок.

Убрал длинные задачи - пропали данные за 03.03 и к

Все понял:  я же города здесь http://localhost:3000  ищу,

а они тут http://localhost:3000/city

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

Все понял:  я же города здесь http://localhost:300

Ты вызываешь метож addEventListener у элемента document. Таким образом слушателя ты добавляешь именно документу. В итоге, где бы ты ни кликнул в документ (который суть враппер для всего содержимого страницы), ты получишь вызов обработчика.

Я же из документа выбираю конкретный селектор, при чем здесь весь документ?

В данном случае не нужны все кнопки, нужна конкретно одна кнопка.

Мне и нужен первый попавшийся элемент кнопка по которому я кликаю.

1. document.addEventListener() Ты вызываешь метож addEventListener у элемента document. Таким образом слушателя ты добавляешь именно документу. В итоге, где бы ты ни кликнул в документ (который суть враппер для всего содержимого страницы), ты получишь вызов обработчика. Я же из документа выбираю конкретный селектор, при чем здесь весь документ? 2. document.addEventListener() можно вызывать несколько раз (как и на любом другом элементе). Если ты искал все кнопки и в цикле попытался навесить на каждую из них обработчик (а навесил каждый раз на документ), то столько раз и вызов произошел по клику. Еще раз уточню, что вызывая  document.addEventListener(), ты добавляешь новый обработчик в массив обработчиков, а не перетираешь существующий. Выполни в консоли getEventListeners(document), увидишь там все обработчики, в том числе и на click. В данном случае не нужны все кнопки, нужна конкретно одна кнопка. 3. Это уже чуть другой момент, но тоже важный. document.querySelector('elem-btn elem-btn--red to-basket ng-scope') - это поиск первого попавшегося элемента, не всех. Чтобы все найти и перечислить, надо юзать Мне и нужен первый попавшийся элемент кнопка по которому я кликаю.

1. document.addEventListener() Ты вызываешь метож

Написать обработчик по клику на кнопку

Обсуждение задания "Use a custom CSS Variable"

Ошибки в консоле есть, но ругается на отсутсвие метриковского информера (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) - все отдал, все города)

Ошибки в консоле есть, но ругается на отсутсвие метриковского информера (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) - все отдал, все города)

Ошибки в консоле есть, но ругается на отсутсвие ме

Понял. А сейчас планируемые даты можно обнулить или уже поздно?

Понял. А сейчас планируемые даты можно обнулить ил

>> Убрал длинные задачи - пропали данные за 03.03 и календаря, в таймере всё ок.

Я вот сейчас не понял, где-то что-то пошло не так? 

>> Убрал длинные задачи - пропали данные за 03.03 и календаря, в таймере всё ок. Я вот сейчас не понял, где-то что-то пошло не так?

>> Убрал длинные задачи - пропали данные за 03.03

Спасибо, с этими хексами сработало. Подсказку я не нашел. Если это текст под кнопкой помощь то там у меня  The div element with class orange should have a background-color of orange. 

Спасибо, с этими хексами сработало. Подсказку я не

У меня прям на информер метрики и ругается: 403 и все тут:

Request URL: https://mc.yandex.ru/informer/26848689/3_1_FFFFFFFF_EFEFEFFF_0_pageviews

Referrer Policy: no-referrer-when-downgrade

У меня прям на информер метрики и ругается: 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

У меня прям на информер метрики и ругается: 403 и

Обсуждение задания "Learn about Tertiary Colors"

Очень интересно! Николай, будешь пробовать администрирование прикручивать к проекту или пока оставишь как есть, с адмикой MODX?

Очень интересно! Николай, будешь пробовать админис

Обновите страницу и должно быть ОК. Выкатил фиксы.

Обсуждение задания "Use grid-column to Control Spacing"

Обсуждение задания "Standardize Times with the HTML5 datetime Attribute"

Ну да: мой календарь выглядит ни разу не информативным( Но у меня и планируемого времени пока не продумано)

Ну да: мой календарь выглядит ни разу не информати

Вообще тут используется @fullcalendar/core (который сам по себе совсем не реактовый), обернутый в @fullcalendar/react, в котором явно есть баги с ивентами (я тоже натыкался пару раз не неправильное поведение). Так что если что, просто обнови страницу для надежности.

Вообще тут используется @fullcalendar/core (которы

Здесь тоже должно заработать (только страницу не забудьте обновить).

Здесь тоже должно заработать (только страницу не з

Контексты просмотрел - удобная штука.

А вот запросы так и не появились: причем в Playground ответ приходит. 

Как можно понять, где болячка сидит?

Контексты просмотрел - удобная штука. А вот запросы так и не появились: причем в 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 не пришли вообще. Но должна быть тогда ошибка по идее.

Тогда уже становится сильно сложнее (тем более что у меня-то ОК работает). Придется вручную искать где именно данные не доходят. И бывают очень неожиданные места (типа нескольких версий одной и той же зависимости). Первый вопрос: в терминале ошибок никаких нет? В терминале должен быть более полный лог серверных ошибок. Второе, копать данные. Вот здесь выполняется запрос и набиваются данные городов: 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 не пришли вообще. Но должна быть тогда ошибка по идее.

Тогда уже становится сильно сложнее (тем более что

У меня видть хром глюкал и меню не отображалось с подсказкой :) Сtrl+f5 и теперь есть подсказка.С Английским дружу, теперь в момент затыков буду переходить на оригинал.

Николай, благодарю. У меня видть хром глюкал и меню не отображалось с подсказкой :) Сtrl+f5 и теперь есть подсказка.С Английским дружу, теперь в момент затыков буду переходить на оригинал.

Николай, благодарю. У меня видть хром глюкал и мен

Вопросы специалистов

Новости

@prisma-cms

Уроки

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

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

Поэтому сделай то, что я написал выше и сообщи результат.

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

Этот код выполняется для всех страниц, потому что

Чаты и личные сообщения на сайте freecode.academy

Выкатил коммит: https://github.com/Pivkarta/pivkarta.ru-2/commit/61d5167e9a6db3ff733fad710373197d308ea01d

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

Обновись, выполни yarn install, перезапусти фронт и проверь работу.

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

Выкатил коммит: https://github.com/Pivkarta/pivkar

Для начала следует разобраться в самом механизме обмена данными, откуда что вообще берется. Ведь у нас не классическая монолитная 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-запросы и их ответы, а так же данные кеша.

Если это не помогло конкретно в вашей ситуации, спрашивайте в комментариях.

Для начала следует разобраться в самом механизме обмена данными, откуда что вообще берется. Ведь у нас не классическая монолитная 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-запросы и их ответы, а так же данные кеша. Если это не помогло конкретно в вашей ситуации, спрашивайте в комментариях.

Для начала следует разобраться в самом механизме о

Все сделал, но информер как ругался, так и ругается. 

В терминале: 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)

Все сделал, но информер как ругался, так и ругается. В терминале: 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)

Все сделал, но информер как ругался, так и ругаетс

Появилось)

Нет, "The div element with class orange should have a background-color of orange" - это непосредственно проверяемые задачи теста. Я специально оставил задачи на англ, чтобы не было ошибочного перевода и чтобы каждый хоть чуть-чуть англ прокачивал (он в программировании необходим). Как правило там всегда простые тексты и легко переводятся гугл-переводчиком. Но старайтесь запоминать основные слова. На сегодня рунет очень сильно отстает от западных технологий как минимум из-за запоздалости технологий. А если вы будете понимать англ хотя бы на уровне чтения документации, вам уже будет сильно легче, потому что почти все ответы можно найти в стековерфлоу и гитхабе.

А подсказка появляется по клику на кнопку Помощь.

Кликаете "Подсказка", попадаете на сайт freecodecamp. Там решения спрятаны под кнопку Solution (так и переводится - решение).

Нет, "The div element with class orange should have a background-color of orange" - это непосредственно проверяемые задачи теста. Я специально оставил задачи на англ, чтобы не было ошибочного перевода и чтобы каждый хоть чуть-чуть англ прокачивал (он в программировании необходим). Как правило там всегда простые тексты и легко переводятся гугл-переводчиком. Но старайтесь запоминать основные слова. На сегодня рунет очень сильно отстает от западных технологий как минимум из-за запоздалости технологий. А если вы будете понимать англ хотя бы на уровне чтения документации, вам уже будет сильно легче, потому что почти все ответы можно найти в стековерфлоу и гитхабе. А подсказка появляется по клику на кнопку Помощь. Кликаете "Подсказка", попадаете на сайт freecodecamp. Там решения спрятаны под кнопку Solution (так и переводится - решение).

Нет, "The div element with class orange should hav

С другой задачей разбираюсь. Как будут результаты, отпишусь.

Не за что! С другой задачей разбираюсь. Как будут результаты, отпишусь.