Страница с перечнем пива

Выполняется
Планируемый запуск: 08.06.2021Дата начала: 11.06.2021Планируемое завершение: Дата завершения:
ПроектЗадачаСтатусДата постановкиНачалоКонецКто создал
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0603.09.2021 05:28:1403.09.2021 06:05:20
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0603.09.2021 05:28:1103.09.2021 05:28:12
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0626.07.2021 12:15:0727.07.2021 15:47:43
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0616.07.2021 05:31:0116.07.2021 05:37:19
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0616.07.2021 04:37:0816.07.2021 04:55:46
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0615.07.2021 06:24:4215.07.2021 06:38:10
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0615.07.2021 05:48:2015.07.2021 13:25:08
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0615.07.2021 05:16:5315.07.2021 05:47:00
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0613.07.2021 13:57:2113.07.2021 14:37:26
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0613.07.2021 05:16:5313.07.2021 06:21:22
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0612.07.2021 05:47:4212.07.2021 06:12:03
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0612.07.2021 05:17:3112.07.2021 05:44:01
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0606.07.2021 08:14:4706.07.2021 08:17:34
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0630.06.2021 13:52:0730.06.2021 13:52:07
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0630.06.2021 13:52:0430.06.2021 13:52:05
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0628.06.2021 06:05:2128.06.2021 06:41:34
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0628.06.2021 04:10:0328.06.2021 05:56:27
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0623.06.2021 06:49:3523.06.2021 06:50:36
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0623.06.2021 05:52:2623.06.2021 06:32:09
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0623.06.2021 04:53:4623.06.2021 05:07:04
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0622.06.2021 05:26:1422.06.2021 05:58:54
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0622.06.2021 04:53:5822.06.2021 05:01:07
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0622.06.2021 04:09:5922.06.2021 04:49:59
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0622.06.2021 04:00:2822.06.2021 04:07:46
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0621.06.2021 07:56:1821.06.2021 08:48:08
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0621.06.2021 06:18:5521.06.2021 06:36:31
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0618.06.2021 07:07:2018.06.2021 08:56:27
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0617.06.2021 14:16:2917.06.2021 14:28:25
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0617.06.2021 07:46:3917.06.2021 07:47:32
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0617.06.2021 05:14:1317.06.2021 06:04:55
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0617.06.2021 05:01:5917.06.2021 05:04:21
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0616.06.2021 08:14:5916.06.2021 08:33:36
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0616.06.2021 07:31:3716.06.2021 07:54:26
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0616.06.2021 06:49:0416.06.2021 06:51:42
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0616.06.2021 06:11:0816.06.2021 06:33:52
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0616.06.2021 05:55:2516.06.2021 06:06:01
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0616.06.2021 05:18:3616.06.2021 05:32:58
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0616.06.2021 05:18:2316.06.2021 05:18:33
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0615.06.2021 07:35:5415.06.2021 08:06:08
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0615.06.2021 06:49:0115.06.2021 07:10:29
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0615.06.2021 05:47:1415.06.2021 06:19:46
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0615.06.2021 05:05:0715.06.2021 05:36:56
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0614.06.2021 04:01:0614.06.2021 04:16:00
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0612.06.2021 05:04:2912.06.2021 06:07:38
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0611.06.2021 06:28:4611.06.2021 06:52:31
Пивная картаСтраница с перечнем пиваВыполняется08.06.2021 06:14:0611.06.2021 05:56:0611.06.2021 06:25:36
Николай, привет!
Посмотришь, если будет возможность: https://github.com/Pivkarta/pivkarta.ru-2/commit/5e87a1d800cabaeecf53483abb999494dac89699

Дима, привет!

Ну в целом вроде ОК, но где getInitialProps? У тебя же опять SSR не работает.
Спасибо! Разбираюсь
Николай, привет! Нужна твоя подсказка: https://github.com/Pivkarta/pivkarta.ru-2/commit/ff615481837fdde219021af5432ea9b8e943274b

Не понимаю, как победить ошибку, посмотри, пожалуйста, по возможности.
Дима, привет!

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

const qq = context.query as any
Вот это совсем не правильно.

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

Понял!

BeersPage.getInitialProps = async (context) => { const { apolloClient } = context const qq = context.query as any const result = await apolloClient.query<BeersConnectionQuery>({ query: BeersConnectionDocument, /** * Важно, чтобы все переменные запроса серверные и фронтовые совпадали, * иначе при рендеринге не будут получены данные из кеша и рендер будет пустой. */ variables: { ...getBeersVariables(qq), }, }) return { statusCode: !result.data.beersConnection.edges.length ? 404 : undefined, } }


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


BeersPage.getInitialProps = async (context) => { const { apolloClient } = context const result = await apolloClient.query<BeersConnectionQuery>({ query: BeersConnectionDocument, /** * Важно, чтобы все переменные запроса серверные и фронтовые совпадали, * иначе при рендеринге не будут получены данные из кеша и рендер будет пустой. */ variables: { ...getBeersVariables(context.query), }, }) return { statusCode: !result.data.beersConnection.edges.length ? 404 : undefined, } }
И здесь context.query вроде как должа иметь тип ParsedUrlQuery, на что и ругается

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

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

И почаще используй форматирование. У тебя вложенность даже сбита.


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

Странный ты. В чем разница между простыми скалярами и объектами?

const age: number = 18; type User = { age: number } const user: User = { age, } console.log(user.age);
Ты же в своем первом варианте брал context.query, то есть из объекта брал свойство. Так же и здесь у тебя на вход не конечное свойство, а объект.
Николай, привет!

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

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

Добавил возможность получать параметр color из url и фильтровать по нему результат.

Можно тебя попросить посмотреть, оптимально ли сделал и вопрос:
Как передать селектом параметр на текущую страницу? Почему-то это стало прям проблемой(
Привет!

>> Как передать селектом параметр на текущую страницу?

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

Вместо
where['color'] = color

пиши лучше
where.color = color

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

const result = await apolloClient.query<BeersConnectionQuery, BeersConnectionQueryVariables>({ query: BeersConnectionDocument, /** * Важно, чтобы все переменные запроса серверные и фронтовые совпадали, * иначе при рендеринге не будут получены данные из кеша и рендер будет пустой. */ variables: { ...getBeersVariables({ query }), }, })
Вот передал бы, и получил ошибку:
Type '{ variables: Exact<{ where?: Maybe<BeerWhereInput> | undefined; orderBy?: Maybe<BeerOrderByInput> | undefined; first?: Maybe<number> | undefined; skip?: Maybe<...> | undefined; }>; page: number; }' has no properties in common with type 'Exact<{ where?: Maybe<BeerWhereInput> | undefined; orderBy?: Maybe<BeerOrderByInput> | undefined; first?: Maybe<number> | undefined; skip?: Maybe<...> | undefined; }>'.ts(2559)
UPD: Итоговый вариант вот такой:

BeersPage.getInitialProps = async ({ apolloClient, query }) => { const { variables } = getBeersVariables({ query }) const result = await apolloClient.query< BeersConnectionQuery, BeersConnectionQueryVariables >({ query: BeersConnectionDocument, /** * Важно, чтобы все переменные запроса серверные и фронтовые совпадали, * иначе при рендеринге не будут получены данные из кеша и рендер будет пустой. */ variables, }) return { statusCode: !result.data.beersConnection.edges.length ? 404 : undefined, } } export default BeersPage

А так у тебя, если отключить JS, с сервера сотраница приходит без списка пива.

Переформулирую вопрос: Как сделать выпадающий список Светлое, Темное и Полутемное, чтобы в урлу попало color: "Светлое"|"Темное"|"Полутемное" | null | undefined
>> Вот здесь ты точно накосячил. Потому что getBeersVariables() у тебя возвращает объект {variables, page}, а ты это еще в variables скармливаешь (на уровень вглубь)....

А где я скармливаю? Не понял(
<< А где я скармливаю? Не понял(

variables: { ...getBeersVariables({ query }), },

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

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

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

Объяснять долго. Сейчас сделаю, отправлю ПР и будешь разбираться. Если что не понятно будет, спросишь.
Да, как-то сильно сложнее, чем предполагал) Изучаю
Ну а как ты хотел? У тебя же там не было готового компонента для селекта.

Но в целом там не так все сложно, как кажется.
1. Завел отдельный компонент BeersColorFilter, в котором выпадающий список и обработчик.
2. Завел специальный тип BeerColor, в котором перечислил возможные варианты ввода и в BeersColorFilter прописал на вход обязательный параметр color.
3. В getBeersVariables() дописал, чтобы он возвращал из УРЛа 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

pivkarta.ru-2: volumes: - ./prisma-cms/pivkarta.ru-2/.storybook:/www/pivkarta.ru-2/.storybook - ./prisma-cms/pivkarta.ru-2/cypress:/www/pivkarta.ru-2/cypress - ./prisma-cms/pivkarta.ru-2/e2e:/www/pivkarta.ru-2/e2e - ./prisma-cms/pivkarta.ru-2/pages:/www/pivkarta.ru-2/pages - ./prisma-cms/pivkarta.ru-2/src:/www/pivkarta.ru-2/src - ./prisma-cms/pivkarta.ru-2/public:/www/pivkarta.ru-2/public - ./prisma-cms/pivkarta.ru-2/stories:/www/pivkarta.ru-2/stories - ./prisma-cms/pivkarta.ru-2/server:/www/pivkarta.ru-2/server - ./prisma-cms/pivkarta.ru-2/package.json:/www/pivkarta.ru-2/package.json command: bash -c "yarn dev" ports: - '3100:3000'
Вот эти папки в контейнере залинкованы на локальный диск. То есть при изменении локально, они соответственно и в докере измененные. Но как видишь, тут не с корня, а часть (хоть и бОльшая). Тем не менее, это не все файлы.

Да, с докером ещё разбираться и разбираться
Все через... :)
Модули не затянулись, файл до последнего не обновляется...

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 выполнил?

Я в контейнере выполнял. А локально - это как? Откуда?
Ага! Понял, что имеется в виду: помогло)
Спасибо!
Да, когда все становится сложнее, мы себе на ровном месте сложности придумываем)))
Николай, привет!
Делаю поиск по названию пива - запутался, посмотри, пожалуйста:






Ты когда пишешь про 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 }

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

if (search) { // eslint-disable-next-line @typescript-eslint/camelcase where.name_contains = search }



return { statusCode: !result.data.beersConnection.edges.length ? 404 : undefined, }
Вот этот вариант тебе тоже здесь не подходит, так как если не найдено ни одной записи, то выводится страница 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


И ещё вопрос: в ImageList Material Ui можно сделать эффект лайтбокса или лучше react-lightbox-component использовать?

ПыСы: пока все в одном файле, но я во вьюху перекну обязательно!

Там с типами следующая тонкость: у тебя вот такой тип: content: Maybe<any[] | Record<string, any>> | undefined
То есть или пусто, или массив, или объект. То есть проверкой на наличие ты уже отметаешь undefined, и у тебя остается или массив или объект. Но по прежнему или то, или другое. Следовательно это лечится проверкой на то, что это не массив.
const blocks = beerinfo.content && !Array.isArray(beerinfo.content) && beerinfo.content?.blocks
Тогда ошибка пропадает, потому что остается только один вариант - это объект.

>> И ещё вопрос: в ImageList Material Ui можно сделать эффект лайтбокса или лучше react-lightbox-component использовать?
MUI не имеет эффектов типа лайтбокса, поэтому да, надо допкомпонент использовать.

Николай, привет!
Понимаю ,что затык идиотский, но решить не могу. Прошу помощи.

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

var images = { [ { src: 'some image url', title: 'image title', description: 'image description' }, ... ] }
Это для запихования картинок в Lightbox


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

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

Все стандартно.
// Задаешь тип массива const images: { src: string; title?: string; description?: string }[] = [] // Проверяешь на наличие массива и набиваешь данные. if (Array.isArray(beerinfo.gallery)) { beerinfo.gallery.forEach((n: string) => { if (n && typeof n === 'string') { images.push({ src: n, }) } }) }


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


query places { mapPlacesConnection ( first: 10 # Условие по пиву where:{ beers_some:{ Beer:{ beer_id: 58 } } } # сортировать от координат center: {lat: 55.752, lng: 37.621} ){ edges { node { id uri place_id name gallery } } } }
Ты на оригинальном сайте запросы посматривай, там же все это есть.

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

Нет, сам сайт https://pivkarta.ru, в chrome dev-tools запросы мониторь.
Точно, через Apollo Client Devtools
Можно и через него. Можно и просто во вкладке Сеть смотрить запросы.
Николай, привет!

Не могу понять опять, что не так с типами здесь: https://github.com/Pivkarta/pivkarta.ru-2/blob/c9a23e5d77f9c54dcd915760145ba7e211d150cc/src/pages/Beers/Beer/BeerPlaces/index.tsx

И странная обстановка с лайтбоксом: работать отказываются

Можешь посмотреть, куда копать?
Дима, привет!

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



Ты как объявил?
const places: PlacesbeerViewProps['places'] = []
и присваиваешь сразу по умолчанию ему массив. А PlacesbeerViewProps['places'] это что за тип? PlacesbeerQuery. То есть это Объект. Не массив объектов, а именно объект. А ты присваиваешь пустой массив. Конечно он будет ругаться. Он тебе и выдает: Property 'mapPlacesConnection' is missing in type 'never[]' but required in type 'PlacesbeerQuery'
То есть в объекте PlacesbeerQuery есть обязательное свойство - mapPlacesConnection, которое ты не передаешь (его нет в объекте Массив).

Тебе нужно было как минимум вот так:
const places: PlacesbeerViewProps['places'][] = []
Но и тут у тебя не все ОК. У тебя уже в респонс прилетает 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.

Загугли и изучи тему ключей в реакте. Про ключи спрашивают на каждом собеседовании (как джунов, так и сеньоров). Если ты не понимаешь в реакте ключей и пренебрегаешь ими - ты не можешь полноценно программировать реакт-компоненты.

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
Это вернет к текущей рабочей версии до последнего пропавшего коммита?
Во! Нашелся коммит)

И после обновления пакетов - ошибки ушли)
>> git pull origin master --force

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

Возник вопрос - помоги, пожалуйста, разобраться.

Вот запрос для плейграунда:

query places { mapPlacesConnection ( first: 10 # Условие по пиву where:{ beers_some:{ Beer:{ beer_id: 58 } } } # сортировать от координат center: {lat: 55.752, lng: 37.621} ){ edges { node { id uri place_id name gallery } } } }
Он отдаёт 10 заведений, ближайших к координатам без привязки к пиву. Где может быть ошибка?
Дима, привет!

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

Вот, уже понятней.
Но новости плохие: GraphQL-схема определяет только что можно запросить, а что нельзя. Но сам по себе GraphQL не отвечает за получение данных, за это отвечают пользовательские резолверы. В нашем же случае хоть в схеме и прописан параметр where, в реальности он в резолвере не учитывается. Там вот только эти параметры учитываются:
const { first: limit = 10, skip, type, center, } = args;
Так что задачку можешь на будущее отдельную завести, но сейчас этотй функционал не получится.
Во блин. Понял, спасибо!
Постараюсь разобраться с пользовательскими резолверами.

Для точности: ты даешь ссылку на код папки 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

Добавить комментарий