Николай, привет! Посмотришь, если будет возможность: https://github.com/Pivkarta/pivkarta.ru-2/commit/5e87a1d800cabaeecf53483abb999494dac89699

Дима, привет! Ну в целом вроде ОК, но где getInitialProps? У тебя же опять SSR не работает.

Спасибо! Разбираюсь

Николай, привет! Нужна твоя подсказка: https://github.com/Pivkarta/pivkarta.ru-2/commit/ff615481837fdde219021af5432ea9b8e943274b Не понимаю, как победить ошибку, посмотри, пожалуйста, по возможности.

Дима, привет! Не ленись прикладывать скрины или хотя бы текстовые сообщения и прочую полезную информацию. А то еще задачу даешь найти где именно ошибка. А если их две и более? Я буду про одно, а ты про другое.

Вот это совсем не правильно. 1. У тебя context.query имеет вполне понятный тип. В any его превращать нет смысла. 2. Использовать any - вообще плохо и максимально надо этого избегать. С этим теряется вся суть тайпскрипта, который как раз для более четкой типизации. 3. Использовать as - тоже очень не хорошо, и хотя порой без этого не обойтись, все же максимально надо этого избегать, прям вот до крайности.

Понял! Я здесь слегка не убрал эксперимент: лишняя переменная qq

Вот как должно быть: И здесь context.query вроде как должа иметь тип ParsedUrlQuery, на что и ругается

И здесь context.query вроде как должа иметь тип ParsedUrlQuery, на что и ругается Просто на вход у тебя там не query, а {query}. Внимательней надо быть :) Отправил PR.

И почаще используй форматирование. У тебя вложенность даже сбита. В итоге ПР получился сильно больше, чем на самом деле было сделано.

Спасибо!

Просто на вход у тебя там не query, а {query}. Внимательней надо быть :) Кстати, а в чем различия?

Странный ты. В чем разница между простыми скалярами и объектами? Ты же в своем первом варианте брал context.query, то есть из объекта брал свойство. Так же и здесь у тебя на вход не конечное свойство, а объект.

Спасибо)

Николай, привет! Делаю фильтр пива по цвету и как принято результат и запихнуть в graphql запрос - вроде понятно. А как ПЕРЕДАТЬ его правильно? Ясно, что надо использовать списки и вроде как должно быть просто, но забуксовал. Можешь подсказать?

Дима, привет! Ты все еще не научился задавать правильно вопросы. Вот как я должен догадываться что и как ты делал? Как думал? Давай еще раз: делай что-то, пытайся, и если не получается, выкладывай код и рассказывай что ты пытался делать и почему.

Понял, спасибо)

Николай, привет! Добавил возможность получать параметр color из url и фильтровать по нему результат. https://github.com/Pivkarta/pivkarta.ru-2/commit/f75ff1a3293efa21bdff28cc839a9cdee5910e84 Можно тебя попросить посмотреть, оптимально ли сделал и вопрос: Как передать селектом параметр на текущую страницу? Почему-то это стало прям проблемой(

Привет! >> Как передать селектом параметр на текущую страницу? Не очень понял вопрос. Постраничность что ли или что? Потому и прошу показывать код. Проще было бы понимать, если к этому еще прикладывалось "Смотри, вот здесь я пытаюсь сделать то-то".

Вместо пиши лучше На 3 символа меньше.

Вот здесь ты точно накосячил. Потому что getBeersVariables() у тебя возвращает объект {variables, page}, а ты это еще в variables скармливаешь (на уровень вглубь). Это все потому что ты в запрос в генерик не передал второй тип-параметр - BeersConnectionQueryVariables. Вот так: Вот передал бы, и получил ошибку: UPD: Итоговый вариант вот такой: А так у тебя, если отключить JS, с сервера сотраница приходит без списка пива.

Переформулирую вопрос: Как сделать выпадающий список Светлое, Темное и Полутемное, чтобы в урлу попало color: "Светлое"|"Темное"|"Полутемное" | null | undefined

Вот здесь ты точно накосячил. Потому что getBeersVariables() у тебя возвращает объект {variables, page}, а ты это еще в variables скармливаешь (на уровень вглубь).... А где я скармливаю? Не понял(

<< А где я скармливаю? Не понял( То есть ты пережаешь объект variables, в который деградацией отправляешь результат выполнения функции getBeersVariables

Пока все равно не понял, но буду разбираться. В целом getInitialProps для меня пока не очевидна.

Отправил тебе ПР: https://github.com/Pivkarta/pivkarta.ru-2/pull/8

getInitialProps - это функция, которая срабатывает либо при первом заходе на страницу, либо при смене страницы. При чем хитрость в том, что она работает как на сервере, так и на фронте. Когда мы заходим в браузер по адресу и отправляется запрос на сервер, там она срабатывает. А когда страница в ответ загружается в браузер, она не срабатывает, потому что это считается первый заход. При этом ее результат, выполненный на сервере, передается и во фронт, то есть на вход страницы у нас переметры есть. Такая сложность связана с тем, что, как я и говорил ранее, Реакт не асинхронный. То есть просто так при рендеринге компонента у нас нет возможность асинхронно дождаться результата выполнения какого-то запроса. Вот в getInitialProps такие запросы можно выполнять, а потом уже переходит на рендеринг компонента.

Подтвердил, разбираюсь! По выпадающий список направишь где искать решение?

Переформулирую вопрос: Как сделать выпадающий список Светлое, Темное и Полутемное, чтобы в урлу попало color: "Светлое"|"Темное"|"Полутемное" | null | undefined Объяснять долго. Сейчас сделаю, отправлю ПР и будешь разбираться. Если что не понятно будет, спросишь.

Спасибо!!

Не за что!

Лови, разбирайся. https://github.com/Pivkarta/pivkarta.ru-2/pull/9

Спасибо!!

Не за что!

Да, как-то сильно сложнее, чем предполагал) Изучаю

Ну а как ты хотел? У тебя же там не было готового компонента для селекта. Но в целом там не так все сложно, как кажется. 1. Завел отдельный компонент BeersColorFilter, в котором выпадающий список и обработчик. 2. Завел специальный тип BeerColor, в котором перечислил возможные варианты ввода и в BeersColorFilter прописал на вход обязательный параметр color. 3. В getBeersVariables() дописал, чтобы он возвращал из УРЛа color. 4. В BeersPage пробрасываем color вглубь компонента. Все. При выборе в селекте меняется УРЛ. Измененный УРЛ прилетает в getBeersVariables(), формируется новый запрос за пивом и передача color обратно в фильтр.

Собственно, потому у тебя и ступор был и сам ты не мог сделать, потому что совсем просто это не сделать, а сложно ты еще не умеешь :)

Этточно)))

Николай, привет! Вопрос: в последнем ПР у нас добавляются в package.json два новых элемента. Как из-под докера запустить их инсталяцию? И еще одим момент: по какой причине git pull origin master может затягивать не последнюю версию https://github.com/Pivkarta/pivkarta.ru-2/blob/master/src/pages/Beers/index.tsx вернее - не весь код: часть кода не затягивается. Что это может быть за хрень?

Не, именно предпоследняя версия файла затягивается, а не из последнего ПР.

Дима, привет! >> Как из-под докера запустить их инсталяцию? Я ранее уже говорил, что можно выполнять произвольные команды docker exec -it {container_name} {command} То есть в твоем случае что-то типа docker exec -it pivkarta-2_1 yarn install Но это сиюминутная мера. А правильней именно пересобирать контейнер. docker-compose -f docker-compose.yml -f docker-compose.dev.yml up -d --build pivkarta.ru-2 Тогда все скопируется и установится по новой. >> И еще одим момент: по какой причине git pull origin master может затягивать не последнюю версию Накак. То есть он или стягивает, или не стягивает. Но опять-таки, у тебя скорее всего проблема в том, что в контейнере не все новые файлы. И это скорее всего решается опять-таки пересборкой контейнера. Короче, выполни git log. Если у тебя локально все последние коммиты показывает, и git status не показывает никаких различий, значит локально у тебя все ОК и просто надо пересобрать контейнер.

Спасибо!! >> Я ранее уже говорил, что можно выполнять произвольные команды docker exec -it {container_name} {command} То есть в твоем случае что-то типа docker exec -it pivkarta-2_1 yarn install До этого сам дошел, но перепутал команду ярна....

Просто чтобы понимать: при создании контейнера, в него копируются указанные файлы (в Dockerfile прописано). То есть это как отдельный компьютер со своими файлами получается. При чем в нашем случае он не тянет из гитхаба, а именно копирует то, что на локале, что уже стянуто с гитхаба. Поэтому стянуть на лоал с гитхаба - это еще не получить файлы новые в контейнере. Но в дев-режиме для контейнера прописаны дополнительные виртуальные диски (volumes) https://github.com/Pivkarta/docker/blob/af08a8295e448d09438bad1faa3971eec5574df1/docker-compose.dev.yml#L20-L28 Вот эти папки в контейнере залинкованы на локальный диск. То есть при изменении локально, они соответственно и в докере измененные. Но как видишь, тут не с корня, а часть (хоть и бОльшая). Тем не менее, это не все файлы.

Да, с докером ещё разбираться и разбираться

Все через... :) Модули не затянулись, файл до последнего не обновляется... git log |commit 1e21f19a1f22f5a08bf6de40d21ddcd0320af8e6 (HEAD -> master, origin/master, origin/HEAD) Merge: d25c304 efc904c Author: linklib 43905676+linklib@users.noreply.github.com Date: Tue Jun 22 10:01:48 2021 +0300 Merge pull request #9 from Fi1osof/master Filter beers by color ------------------ (HEAD -> master, origin/master, origin/HEAD) -- это нормально или не очень?

Дима, пришли все результаты трех команд: git remote -v git branch git status

dima@dima-Lenovo-ideapad-720-15IKB:/docker/docker-pivkarta/prisma-cms/pivkarta.ru-2$ git remote -v origin https://github.com/Pivkarta/pivkarta.ru-2 (fetch) origin https://github.com/Pivkarta/pivkarta.ru-2 (push) dima@dima-Lenovo-ideapad-720-15IKB:/docker/docker-pivkarta/prisma-cms/pivkarta.ru-2$ git branch * master test2 test3 test4 dima@dima-Lenovo-ideapad-720-15IKB:~/docker/docker-pivkarta/prisma-cms/pivkarta.ru-2$ git status На ветке master Ваша ветка обновлена в соответствии с «origin/master». нечего коммитить, нет изменений в рабочем каталоге

Ну тогда локально у тебя все ОК, то есть все файлы синхранизированы. Остается только пересобрать контейнер. docker-compose -f docker-compose.yml -f docker-compose.dev.yml up -d --build pivkarta.ru-2 А в чем именно у тебя проявляется ошибка? Что не так?

Я его пересобирал - вроде норм. Сейчас ещё раз Ошибки: -не отдает страницу /beer - 404 - в модули не залетело то, что ты добавил в package.json - код страницы Beers/index.tsx не желает обновляться из последнего ПР Вопрос: если я копипастну с гита код - это нормально или не стоит?

dima@dima-Lenovo-ideapad-720-15IKB:~/docker/docker-pivkarta$ docker-compose -f docker-compose.yml -f docker-compose.dev.yml up -d --build pivkarta.ru-2 Building pivkarta.ru-2 Step 1/21 : FROM mhart/alpine-node:15 as build ---> 1f891c16331c Step 2/21 : ARG SITE=boilerplate ---> Using cache ---> f534129a549f Step 3/21 : ARG ROLE ---> Using cache ---> 4f303a587ef7 Step 4/21 : ARG endpoint ---> Using cache ---> 58dbeaff46be Step 5/21 : ENV endpoint $endpoint ---> Using cache ---> ab0c56c8b8d6 Step 6/21 : ARG ENV_MODE ---> Using cache ---> bbf9e83eeee0 Step 7/21 : ENV ENV_MODE $ENV_MODE ---> Using cache ---> 034710b8fa6f Step 8/21 : ARG PUBLIC_URL ---> Using cache ---> 2f57164ed11f Step 9/21 : ENV PUBLIC_URL $PUBLIC_URL ---> Using cache ---> e67d61c38df3 Step 10/21 : RUN apk add bash ---> Using cache ---> a5f69aa7d67d Step 11/21 : RUN apk add mc ---> Using cache ---> 3a7bce6c5f21 Step 12/21 : RUN apk add curl ---> Using cache ---> e5997112d34b Step 13/21 : RUN apk add python2 ---> Using cache ---> cd62170effc9 Step 14/21 : RUN apk add python3 ---> Using cache ---> 0dc4003d2556 Step 15/21 : RUN apk add make ---> Using cache ---> 7e48efb32bb6 Step 16/21 : RUN apk add g++ ---> Using cache ---> 8f8b81d55c48 Step 17/21 : RUN apk add git ---> Using cache ---> 4aaa03f9f7a6 Step 18/21 : WORKDIR /www/${SITE}/ ---> Using cache ---> 0d078dc637d1 Step 19/21 : COPY ./${SITE} . ---> Using cache ---> 011d49b8365a Step 20/21 : COPY ./bin/* /usr/bin/ ---> Using cache ---> f145a65cceeb Step 21/21 : RUN yarn install --ignore-engines ---> Using cache ---> 37f1a3707b1a [Warning] One or more build-args [API_ENDPOINT] were not consumed Successfully built 37f1a3707b1a Successfully tagged docker-pivkarta_pivkarta.ru-2:latest docker-pivkarta_pivkarta.ru-2_1 is up-to-date ------------------------------------------------------------ Здесь проблема ---- [Warning] One or more build-args [API_ENDPOINT] were not consumed ?

Аа, ну ты Алёша. У тебя сказано One or more build-args [API_ENDPOINT] were not consumed То есть у тебя переменная окружения API_ENDPOINT не задана. У тебя вообще в корне докер-проекта файл .env лежит? Хотя должен был быть, иначе вообще не собрался бы контейнер. Ты пропиши API_ENDPOINT=https://pivkarta.ru/api/ У меня все работает, только что собрал контейнер. >> -не отдает страницу /beer - 404 Это скорее всего потому что соединения с АПИ нет, не были получены данные и соответственно 404, потому что данных нет. Может ты вообще откуда-то не оттуда запускаешь оркестратор.

Во блин... а почему тогда раньше работало... pivkarta.ru-2 - был env.sample, добавил .env c API_ENDPOINT=https://pivkarta.ru/api В корне docker-pivkarta - есть c локальными эндпоинтами. >>Может ты вообще откуда-то не оттуда запускаешь оркестратор. /docker/docker-pivkarta - я отсюда, а откуда надо? UPD API_ENDPOINT=https://pivkarta.ru/api - так было, без слэша, заменил - проверяю

<< Во блин... а почему тогда раньше работало... Возможно в прошлый раз ты задавал его вручную API_ENDPOINT=https://pivkarta.ru/api docker-compose -f docker-compose.yml -f docker-compose.dev.yml up -d --build pivkarta.ru-2 В таком случае такая переменная окружения перетирает даже то, что есть в .env

Смотри, вот в этом комменте я все это показывал и рассказывал. Ты, видимо, повторил за мной и забыл :)

Добавил - ожило)

Смотри, вот в этом комменте я все это показывал и рассказывал. Ты, видимо, повторил за мной и забыл :) Точно! Блин... Спасибо!!

Пожалуйста!

Николай, привет! ПОсмотришь на предмет реализации: как улучшить: https://github.com/Pivkarta/pivkarta.ru-2/commit/28880e994a75391f0f0c6d3b0db817fd2c2d8f12 И момент: пришлось пушить но верифи, так как так и не понял, почему это: --------------------------------- dima@dima-Lenovo-ideapad-720-15IKB:~/docker/docker-pivkarta/prisma-cms/pivkarta.ru-2$ yarn types yarn run v1.22.5 $ tsc --pretty --noEmit src/pages/Beers/View/ColorFilter/index.tsx:2:32 - error TS2307: Cannot find module '@prisma-cms/ui/dist/form/Select' or its corresponding type declarations. 2 import Select, { Option } from '@prisma-cms/ui/dist/form/Select' ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/pages/Beers/View/FilteredFilter/index.tsx:2:32 - error TS2307: Cannot find module '@prisma-cms/ui/dist/form/Select' or its corresponding type declarations. 2 import Select, { Option } from '@prisma-cms/ui/dist/form/Select' ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/theme/index.tsx:1:21 - error TS2307: Cannot find module '@prisma-cms/ui/dist/theme' or its corresponding type declarations. 1 import uiTheme from '@prisma-cms/ui/dist/theme' ~~~~~~~~~~~~~~~~~~~~~~~~~~~ Found 3 errors. ------------------------------- Визуально я модулей ui не нахожу в node_modules. Делал ещё раз баш на докер пиварты и yarn install - не появились. Но на браузере вроде все норм отображается. ХЗ((

Дима, привет! А ты у себя локально yarn install выполнил? В контейнере-то зависимости сами установились, но оттуда node_modules не распространяется на твой локальный диск. Сам посмотри, экшены-то нормально прошли на гитхабе: https://github.com/Pivkarta/pivkarta.ru-2/actions

Ну а так у тебя вроде все работает.

А ты у себя локально yarn install выполнил? Я в контейнере выполнял. А локально - это как? Откуда?

Ага! Понял, что имеется в виду: помогло) Спасибо!

Да, когда все становится сложнее, мы себе на ровном месте сложности придумываем)))

Николай, привет! Делаю поиск по названию пива - запутался, посмотри, пожалуйста: https://github.com/Pivkarta/pivkarta.ru-2/commit/ca5a56282a1b378038c3ddc33ca739a4e2252ae3 Не понимаю , чего TS от меня хочет здесь https://github.com/Pivkarta/pivkarta.ru-2/blob/ca5a56282a1b378038c3ddc33ca739a4e2252ae3/src/pages/Beers/View/index.tsx#L25 И как правильно написать условие в where https://github.com/Pivkarta/pivkarta.ru-2/blob/ca5a56282a1b378038c3ddc33ca739a4e2252ae3/src/pages/Beers/index.tsx#L87 И как сделать отслеживание изменений здесь https://github.com/Pivkarta/pivkarta.ru-2/blob/ca5a56282a1b378038c3ddc33ca739a4e2252ae3/src/pages/Beers/View/SearchFilter/index.tsx#L25

Не понимаю , чего TS от меня хочет здесь https://github.com/Pivkarta/pivkarta.ru-2/blob/ca5a56282a1b378038c3ddc33ca739a4e2252ae3/src/pages/Beers/View/index.tsx#L25 Ты когда пишешь про TS-ошибки, цитируй их здесь же. Чтобы тебе потом стыдно было :) Пишет же: Type '{ search: BeersSearchFilterProps; }' is not assignable to type 'IntrinsicAttributes'. Property 'search' does not exist on type 'IntrinsicAttributes'.ts(2322) Тебе же ясно говорится: не известен параметр search. Ты его прописал в параметрах BeersSearchFilter? Нет. Точнее, ты прописал в BeersSearchFilterProps, но не передал этот тип в BeersSearchFilter.

Далее, у тебя такой тип есть: (alias) type BeersSearchFilterProps = { search: BeerSearch; } import BeersSearchFilterProps и на вход search: BeersSearchFilterProps И этот же search ты пытаешься пробросить в фильтр, где search: BeerSearch То есть на самом деле тебе надо пробрасывать search.search. Будь внимательней к типам и вложенностям.

Понятно, ты хотел не export type BeersPageViewProps = { // ...

search: BeersSearchFilterProps } а export type BeersPageViewProps = { // ...

search: BeersSearchFilterProps['search'] }

const search: BeerSearch = query.search && typeof query.search === 'string' && query.search Здесь двойная проверка на query.search, чтобы было наверняка?))

if (search) { where.name = search } У тебя сейчас поиск рассчитан на точное вхождение. Вряд ли это то, что ты хотел. Правильней так:

Вот этот вариант тебе тоже здесь не подходит, так как если не найдено ни одной записи, то выводится страница 404 без возможности изменить фильтр. Это надо убирать и делать кастомную надпись типа "Не найдено ни одного вида пива".

Спасибо, ковыряю) >> У тебя сейчас поиск рассчитан на точное вхождение. Вряд ли это то, что ты хотел. Правильней так: -- потерялось что-то(

Отправил PR, изучай: https://github.com/Pivkarta/pivkarta.ru-2/pull/10 Правда пока не очень отзывчивое текстовое поле получилось, потому что при вводе данных в нее выполняется изменение адресной строки, и только потом данные из эттой адресной строки прилетают в само поле. Из-за это не сразу появляются силы при вводе. Пока не придумал как сделать получше, так как в противном случае просто теряется функциональность. Потом что-нить придумаю.

Супер, спасибо! Изучаю.

Николай, привет! Закинул коммит с ошибкой - опять с типами не понимаю: https://github.com/Pivkarta/pivkarta.ru-2/blob/2d6787948f2b5d7c2ee848e869619957847364a6/src/pages/Beers/Beer/index.tsx#L211 Можешь посмотреть? Коммит: https://github.com/Pivkarta/pivkarta.ru-2/commit/2d6787948f2b5d7c2ee848e869619957847364a6 И ещё вопрос: в ImageList Material Ui можно сделать эффект лайтбокса или лучше react-lightbox-component использовать? ПыСы: пока все в одном файле, но я во вьюху перекну обязательно!

Отправил ПР: https://github.com/Pivkarta/pivkarta.ru-2/pull/11 Там с типами следующая тонкость: у тебя вот такой тип: content: Maybe<any[] | Record<string, any>> | undefined То есть или пусто, или массив, или объект. То есть проверкой на наличие ты уже отметаешь undefined, и у тебя остается или массив или объект. Но по прежнему или то, или другое. Следовательно это лечится проверкой на то, что это не массив. Тогда ошибка пропадает, потому что остается только один вариант - это объект. >> И ещё вопрос: в ImageList Material Ui можно сделать эффект лайтбокса или лучше react-lightbox-component использовать? MUI не имеет эффектов типа лайтбокса, поэтому да, надо допкомпонент использовать.

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

Николай, привет! Понимаю ,что затык идиотский, но решить не могу. Прошу помощи. Надо взять отсюда https://github.com/Fi1osof/pivkarta.ru-2/blob/5e1a4937498f2a6efb8c3cc6dbd0ca1a690c2e02/src/pages/Beers/Beer/index.tsx#L81 линки фоток и привести к виду Это для запихования картинок в Lightbox

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

Привет! >> Надо взять отсюда https://github.com/Fi1osof/pivkarta.ru-2/blob/5e1a4937498f2a6efb8c3cc6dbd0ca1a690c2e02/src/pages/Beers/Beer/index.tsx#L81 линки фоток и привести к виду Все стандартно.

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

Спаибо! Изучаю! >> Ты на оригинальном сайте запросы посматривай, там же все это есть Оригинал же у нас в /prisma-cms/pivkarta.ru ?

Оригинал же у нас в /prisma-cms/pivkarta.ru ? Нет, сам сайт https://pivkarta.ru, в chrome dev-tools запросы мониторь.

Точно, через Apollo Client Devtools

Можно и через него. Можно и просто во вкладке Сеть смотрить запросы.

Понял, спасибо!

Не за что!

Николай, привет! Можешь коммит глянуть? https://github.com/Pivkarta/pivkarta.ru-2/commit/c9a23e5d77f9c54dcd915760145ba7e211d150cc Не могу понять опять, что не так с типами здесь: https://github.com/Pivkarta/pivkarta.ru-2/blob/c9a23e5d77f9c54dcd915760145ba7e211d150cc/src/pages/Beers/Beer/BeerPlaces/index.tsx И странная обстановка с лайтбоксом: работать отказываются https://github.com/Pivkarta/pivkarta.ru-2/blob/c9a23e5d77f9c54dcd915760145ba7e211d150cc/src/pages/Beers/Beer/index.tsx Можешь посмотреть, куда копать?

Дима, привет! 1. Вот ты getVariables как есть объявил внутри компонента. В большинстве случаев (как и здесь) - это очень не хорошо. При каждом ререндеринге компонента будет создаваться новая функция и будет ререндериться HTML, зависящий от нее. Или выносить надо отдельно за пределы компонента (чтобы это реальная константа была на постоянку, как это сделано в других местах), или хотя бы оборачивать в useMemo(), чтобы заморозить переменную.

2. Вот здесь ты затупил с типом: https://github.com/Pivkarta/pivkarta.ru-2/blob/c9a23e5d77f9c54dcd915760145ba7e211d150cc/src/pages/Beers/Beer/BeerPlaces/index.tsx#L41 Ты как объявил? и присваиваешь сразу по умолчанию ему массив. А PlacesbeerViewProps['places'] это что за тип? PlacesbeerQuery. То есть это Объект. Не массив объектов, а именно объект. А ты присваиваешь пустой массив. Конечно он будет ругаться. Он тебе и выдает: Property 'mapPlacesConnection' is missing in type 'never[]' but required in type 'PlacesbeerQuery' То есть в объекте PlacesbeerQuery есть обязательное свойство - mapPlacesConnection, которое ты не передаешь (его нет в объекте Массив). Тебе нужно было как минимум вот так: Но и тут у тебя не все ОК. У тебя уже в респонс прилетает PlacesbeerQuery, но ты пытаешься еще создать массив places, опять-таки из этих PlacesbeerQuery. То есть по сути из одного PlacesbeerQuery ты хочешь получить массив PlacesbeerQuery. Не логично, правда? А на самом деле PlacesbeerQuery у тебя содержит edges: node[]. То есть тебе надо выдернуть именно конечные ноды и набить их в массив places. Но ты не сможешь просто так тип массиву places задать, потому что у тебя GraphQL-запрос написан одной портянкой без разбива на фрагменты. Обрати внимание как это сделано у меня: вот есть фрагмент company, и вот здесь я его использую в запросе. Такие фрагменты генератор кода выносит в отдельные типы с суффиксом Fragment. К примеру вот CompanyFragment. Вот это уже позволяет использовать тип самого объекта компании: https://github.com/Pivkarta/pivkarta.ru-2/blob/c9a23e5d77f9c54dcd915760145ba7e211d150cc/src/pages/Companies/Company/interfaces.ts#L5 А тебе в твоем случае не за чем вообще набивать массив заведений, а просто можно перечислить полученный результат (там типы итак будут поняты). Но если ты хочешь писать внутренние компоненты и четко указывать что на вход должно прийти, то обязательно надо разбить на фрагменты (только нельзя иметь два фрагмента с одним и тем же именем).

3. И обращай внимание на JS-ошибки в дев-тулз. Их, по-хорошему, не должно быть. А у тебя вот такое: Warning: Each child in a list should have a unique "key" prop. Загугли и изучи тему ключей в реакте. Про ключи спрашивают на каждом собеседовании (как джунов, так и сеньоров). Если ты не понимаешь в реакте ключей и пренебрегаешь ими - ты не можешь полноценно программировать реакт-компоненты.

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

Отправил ПР: https://github.com/Pivkarta/pivkarta.ru-2/pull/12 Сейчас лайтбокс гляну.

Отправил ПР: https://github.com/Pivkarta/pivkarta.ru-2/pull/13 1. Ты должен уяснить, что не все реакт-компоненты умеют в SSR (Server-side rendering). Выбранный тобой компонент react-lightbox-component как раз один из них. То есть при прямом подключении react-lightbox-component как есть, возникает 500 ошибка при обновлении страницы (потому что next-js - это SSR-приложение и оно пытается выполнить реакт на сервере). В итоге приходится подключать через next/dynamic с сопутствующими танцами с бубнами (в коде найдешь комментарии). 2. У тебя в целом он работал (если динамически на фронте обновить), просто стили не были подключены. А прос стили как раз ничего нет в "документации" компонента (которой по сути и нету). Поэтому второе, что ты должен уяснить - не все реакт-компоненты одинаково хороши (это касается как качества самого кода, так и документации). Поэтому, когда ты какой-то компонент пишешь, смотри на гитхабе как часто он обновляется, сколько там issue и т.п. Вот этот компонент уже 3 года не обновлялся, это как бы уже должно наводить на мысль, что он заброшенный.

Понял ,спасибо!

Пожалуйста!

Николай ,привет! Не подскажешь, как найти коммит, опять куда-то закинул - поди пойми куда( dima@dima-Lenovo-ideapad-720-15IKB:~/docker/docker-pivkarta/prisma-cms/pivkarta.ru-2$ git log commit b2ad816b2f16386187f2b9d5f0acf5463b484fc7 (HEAD -> master) Author: Dima linklib.web@yandex.ru Date: Sun Aug 8 09:34:08 2021 +0300 Change lightbox component Я здесь поменял компонент, но почему-то посыпались ошибки с apollo... Мне бы этот коммит как-то откатить и разбираться с вылезшими ошибками, но не знаю, можно ли это сделать.

1. Надо смотреть git status То, что у тебя коммит локально есть, это еще не значит, что ты его обязательно вылил. Да и ветка может быть не та. 2. Сделай git push --all Это выльет все ветки все коммиты в гитхаб. Там можно попробовать найти.

Спасибо! Подскажи, плиз, если я сделаю git pull origin master --force Это вернет к текущей рабочей версии до последнего пропавшего коммита?

Во! Нашелся коммит) https://github.com/Pivkarta/pivkarta.ru-2/commit/b2ad816b2f16386187f2b9d5f0acf5463b484fc7 И после обновления пакетов - ошибки ушли)

git pull origin master --force Это стянет с внешнего репозитория и вероятно поудаляет лишние коммиты на локале (то есть в соответствие с внешним репозиторием приведет). Я точно не знаю, потому что так не делал. Я только git push --force делал. Если у тебя коммит локально есть, но его нет на гитхабе, то тебе именно push надо делать, то есть выливать локальные во внешний. А если ты зальешь, да еще с перетиранием, то ты и локальные потеряешь.

Понял, спасибо!

Николай, привет! Возник вопрос - помоги, пожалуйста, разобраться. Вот запрос для плейграунда: Он отдаёт 10 заведений, ближайших к координатам без привязки к пиву. Где может быть ошибка?

Дима, привет! В который раз: а где ошибка? Какая? Чего ты ожидаешь? Ты в который раз показываешь куски кода, но не рассказываешь что хочешь получить и что получаешь.

Понял) Это код, который должен отдавать 10 ближайших заведений к точке center, в которых есть пиво beer_id: 58, но отдает просто 10 ближайших заведений. Вот пытаюсь понять причину. Это запрос из https://freecode.academy/comments/18ad209fa9ca06951ebd641d4

Вот, уже понятней. Но новости плохие: GraphQL-схема определяет только что можно запросить, а что нельзя. Но сам по себе GraphQL не отвечает за получение данных, за это отвечают пользовательские резолверы. В нашем же случае хоть в схеме и прописан параметр where, в реальности он в резолвере не учитывается. Там вот только эти параметры учитываются: Так что задачку можешь на будущее отдельную завести, но сейчас этотй функционал не получится.

Во блин. Понял, спасибо! Постараюсь разобраться с пользовательскими резолверами. Для точности: ты даешь ссылку на код папки pivkarta.ru, а ковыряюсь с pivkarta.ru-2. Так и надо или я что-то не понял?

Для точности: ты даешь ссылку на код папки pivkarta.ru, а ковыряюсь с pivkarta.ru-2. Так и надо или я что-то не понял? У тебя pivkarta.ru-2 - это только фронт. Там нет как такового сервера, все запросы проксятся на АПИ-сервер боевого сайта, поэтому что касается бэка, надо смотреть именно в репе боевого сайта. Собственно, то же самое сейчас и с самим freecode.academy: фронт переписан на next-js, а вот АПИ работает еще на старой версии prisma-cms.com. И вот в текущий момент я как раз переписываю окончательно на nextjs-nexus, то есть на последнюю версию своего движка. По сути к текущей версии с фронтом дописывается и полноценный бэк. Фронт переключается на него. Задача в том, чтобы новый бэк переписать так, чтобы фронт с ним заработал без ошибок. На практике не все так прям гладко, но в целом этот процесс с новым фронтом проходит боле менее спокойно. Как все доделаю и переключу сайт, напишу подробный топик (но это совсем еще не сегодня).

Понял. Изучаю пристально pivkarta.ru

Так я вообще не очень понимаю, как связаны папки pivkarta.ru и pivkarta.ru-2. Можешь намекнуть, куда копаться?

Папки эти никак не связаны. Это разные проекты. Просто pivkarta.ru - это https://pivkarta.ru (и сам сайт, и его АПИ), а pivkarta.ru-2 - это твой локальный пэт-проект, который жанные по АПИ тянет с https://pivkarta.ru-2

Спасибо!