@prisma-cms/front-editor

Добавление кастомных компонентов в @prisma-cms/front-editor

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

1) В первую очередь, это то, что он кушает много ресурсов процессора. Вот я кликаю на каком-то компоненте, у меня открывается слева панель с непонятными фреймами и 1.4 гигагерцовый процессор моей двенашки начинает мучаться. Не пойму, с чем это связано, но это заметно на прокрутке этого блока слева.

2) Я не совсем понимаю его интерфейс, в первую очередь вот этот выплывающий сайд слева. Что он делает, для чего он? Кнопочки на компонентах, что означает та или иная, ну и т.д.

P.S. Кстати, а почему кнопка "Редактировать шаблон" отображается у всех, включая не-админов?

Фишка с редактором шаблонов классная. Учитывая, что у приложений и сайтов зачастую большинство компонентов на странице переиспользуемые, то визуально размещать их куда удобнее. Только тут есть несколько моментов, которые меня очень смущают и заставляют задуматься о выпиливании этого инструмента: 1) В первую очередь, это то, что он кушает много ресурсов процессора. Вот я кликаю на каком-то компоненте, у меня открывается слева панель с непонятными фреймами и 1.4 гигагерцовый процессор моей двенашки начинает мучаться. Не пойму, с чем это связано, но это заметно на прокрутке этого блока слева. 2) Я не совсем понимаю его интерфейс, в первую очередь вот этот выплывающий сайд слева. Что он делает, для чего он? Кнопочки на компонентах, что означает та или иная, ну и т.д. P.S. Кстати, а почему кнопка "Редактировать шаблон" отображается у всех, включая не-админов?

Фишка с редактором шаблонов классная. Учитывая, чт

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

1. React dev tools. На гитхабе не мало issue создано на счет низкой производительности. Скорее всего он использует в работе deep clone + lodash или типа того. react context позволяет передавать любые объекты, в том числе и классы компонентов. И вот так как в @prisma-cms в контекстах довольно много всякого, dev tools становится очень грустным и жутко тормозит. По этой причине он у меня давно уже отключен.

2. Довольно неоптимальный базовый класс компонентов фронт-редактора. Как я и говорил в статье, там не просто this.props используется, а своя костыльная логика, и скорее всего он так же дает лишней нагрузки (но по большей степени только в режиме редактирования. В обычном режиме там особой потери нет). Но повторюсь, когда логика устаканится, займусь его перепиливанием.

3. Работа со строками. Вот глянь вот эту статью: https://habr.com/ru/post/449368/. Уверен, в итоге придется и на этот счет серьезно прошерстить код.

В общем, да, проблемы с производительностью есть, но как и говорил, позже буду их обязательно решать, уверен, можно будет значительно поправить производительность. Сейчас же в режиме редактирования (тем более в dev-режиме, а не в production mode), надо и памяти не мало (в dev надо рассчитывать на гиг-два на вкладку), и процессор помощнее. У меня core i7 и 14Gb оперативы, относительно комфортно себя ощущаю.

На счет непонятных фреймов: вот здесь я писал, что отдельные части шаблонов можно сохранять в самостоятельные сущности и потом использовать на странице. Все их можно увидеть на странице /templates. Вот в редакторе в левой панели они и выводятся. Это для того, чтобы можно было вставить уже готовые блоки на странице. Это такой своего рода minecraft - создаешь отдельные небольшие куски, их можно использовать в формировании более крупных шаблонов, те еще и так далее. При чем там есть важная особенности при вставке: если просто кликнуть какой-либо готовый шаблон, то будет на странице вставлен весь его код (то есть скопирован). А если кликнуть кнопку "Вставить с ID (Insert with ID)" http://joxi.ru/D2PeVyqhqY6KZA, то будет вставлена ссылка на этот шаблон. То есть можно в нескольких частях страницы и на разных страницах повставлять ссылки на готовый шаблон, а потом редактировать в одном месте, и везде будет выводиться актуальный код. (это частичный ответ и на пункт 2 твоего вопроса).

>> Кнопочки на компонентах, что означает та или иная, ну и т.д.

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

На счет производительности: есть такое понятие как преждевременная оптимизация. Вот здесь я ее пока избегаю. Весь этот функционал - сплошной эксперимент. Когда я его начинал, у меня были идеи и потребности, но до сих пор нет окончательной мысли как это будет выглядеть в конечном итоге. Нет смысла оптимизировать то, что постоянно меняется и переделывается. Но несколько причин проблемы с производительностью мне известны: 1. React dev tools. На гитхабе не мало issue создано на счет низкой производительности. Скорее всего он использует в работе deep clone + lodash или типа того. react context позволяет передавать любые объекты, в том числе и классы компонентов. И вот так как в @prisma-cms в контекстах довольно много всякого, dev tools становится очень грустным и жутко тормозит. По этой причине он у меня давно уже отключен. 2. Довольно неоптимальный базовый класс компонентов фронт-редактора. Как я и говорил в статье, там не просто this.props используется, а своя костыльная логика, и скорее всего он так же дает лишней нагрузки (но по большей степени только в режиме редактирования. В обычном режиме там особой потери нет). Но повторюсь, когда логика устаканится, займусь его перепиливанием. 3. Работа со строками. Вот глянь вот эту статью: https://habr.com/ru/post/449368/. Уверен, в итоге придется и на этот счет серьезно прошерстить код. В общем, да, проблемы с производительностью есть, но как и говорил, позже буду их обязательно решать, уверен, можно будет значительно поправить производительность. Сейчас же в режиме редактирования (тем более в dev-режиме, а не в production mode), надо и памяти не мало (в dev надо рассчитывать на гиг-два на вкладку), и процессор помощнее. У меня core i7 и 14Gb оперативы, относительно комфортно себя ощущаю. На счет непонятных фреймов: вот здесь я писал, что отдельные части шаблонов можно сохранять в самостоятельные сущности и потом использовать на странице. Все их можно увидеть на странице /templates. Вот в редакторе в левой панели они и выводятся. Это для того, чтобы можно было вставить уже готовые блоки на странице. Это такой своего рода minecraft - создаешь отдельные небольшие куски, их можно использовать в формировании более крупных шаблонов, те еще и так далее. При чем там есть важная особенности при вставке: если просто кликнуть какой-либо готовый шаблон, то будет на странице вставлен весь его код (то есть скопирован). А если кликнуть кнопку "Вставить с ID (Insert with ID)" http://joxi.ru/D2PeVyqhqY6KZA, то будет вставлена ссылка на этот шаблон. То есть можно в нескольких частях страницы и на разных страницах повставлять ссылки на готовый шаблон, а потом редактировать в одном месте, и везде будет выводиться актуальный код. (это частичный ответ и на пункт 2 твоего вопроса). >> Кнопочки на компонентах, что означает та или иная, ну и т.д. Для этого я и сделал отдельный сайт, чтобы описать все основные компоненты фронт-редактора. В ближайшем будущем прям в кнопки добавлю ссылки на статьи, описывающие эти элементы. И для этого я и примеры привожу, чтобы было видно на более локальных шаблонах что как работает. Постепенно документация будет на каждый элемент. Ну а так, вопросы задавайте или экспериментируйте :) И смотрите исходный код компонентов. Подключенные компоненты перечислены здесь, оттуда можно найти путь до кода каждого компонента в отдельности, чтобы изучить непосредственно его код.

На счет производительности: есть такое понятие как

>> P.S. Кстати, а почему кнопка "Редактировать шаблон" отображается у всех, включая не-админов?

Это я оставил специально, чтобы было видно редактор. А то итак не понятно что это такое, еще и видно не будет :) Но это отключается. В вызов RootConnector передай параметр clonable={false}. Тогда выводиться будет только для судо и для создателя шаблона.

>> P.S. Кстати, а почему кнопка "Редактировать шаблон" отображается у всех, включая не-админов? Забыл тебе ответить :) Это я оставил специально, чтобы было видно редактор. А то итак не понятно что это такое, еще и видно не будет :) Но это отключается. В вызов RootConnector передай параметр clonable={false}. Тогда выводиться будет только для судо и для создателя шаблона.

>> P.S. Кстати, а почему кнопка "Редактировать шаб

@prisma-cms/front-editor@1.17.3 Улучшенная производительность и удобство

Методы EditorComponent::canBeParent(parent) и EditorComponent::canBeChild(child)

Ссылки на справочные статьи в кнопках компонентов

@prisma-cms/front-editor 1.19.0 Кнопки добавления вложенных компонентов в самих компонентах

Расширение prisma-cms для редактора VS Code. Ускоряем процесс программирования.

Индивидуальное оформление каждого топика в отдельности

Никто комментарий так и не хочет написать:)

Опять комментарий не туда улетел:) Надо уже поправить эту багу.

Опять комментарий не туда улетел:) Надо уже поправ

Любопытно

А я написал комментарий здесь: https://prisma-cms.github.io

А я написал комментарий здесь: https://prisma-cms.

Учебный проект pivo-moscow

Как будет процес обучения выглядеть? 

- здесь обсуждаем текущую задачу по проекту, которую решаем;

- ищем оптимальное решение;

- смотрим, что вышло и переходим к следующей задаче.

Есть идеи как усилить процес - пиши) 

Олег, приветствую! Пока видится так: - здесь обсуждаем текущую задачу по проекту, которую решаем; - ищем оптимальное решение; - внедряем в проект; - смотрим, что вышло и переходим к следующей задаче. Есть идеи как усилить процес - пиши)

Олег, приветствую! Пока видится так: - здесь обсуж

Дима, успехов в начинаниях! :)

В свою очередь добавлю, что этот проект для обучения современным технологиям очень годится, потому что так же используется GraphQL API https://pivkarta.ru/api/

и здесь уместно все то же самое, что я и записывал в одном из первых видео https://freecode.academy/topics/obzornoe-video-po-@prisma-cms/nextjs

Так что тоже всем советую поиграться. Задачи по объему совсем небольшие, а знания будут получены очень полезные.

Дима, успехов в начинаниях! :) В свою очередь добавлю, что этот проект для обучения современным технологиям очень годится, потому что так же используется GraphQL API https://pivkarta.ru/api/ и здесь уместно все то же самое, что я и записывал в одном из первых видео https://freecode.academy/topics/obzornoe-video-po-@prisma-cms/nextjs Так что тоже всем советую поиграться. Задачи по объему совсем небольшие, а знания будут получены очень полезные.

Дима, успехов в начинаниях! :) В свою очередь доба

Николай, спасибо большое!

Не за что! :)

Дима, ты вылил в гитхаб проект с локала как есть, и потерялась всякая связь с исходным проектом https://github.com/prisma-cms/nextjs

1. Удали этот проект (в настройках в самом низу страницы есть).

2. Перейди на https://github.com/prisma-cms/nextjs и сделай с него клон (fork).

3. Переименуй свой форк (так же в настройках есть).

4. Вылий с локала в него (коммиты должны залететь без проблем).

Дима, ты вылил в гитхаб проект с локала как есть, и потерялась всякая связь с исходным проектом https://github.com/prisma-cms/nextjs Сделай следующее: 1. Удали этот проект (в настройках в самом низу страницы есть). 2. Перейди на https://github.com/prisma-cms/nextjs и сделай с него клон (fork). 3. Переименуй свой форк (так же в настройках есть). 4. Вылий с локала в него (коммиты должны залететь без проблем).

Дима, ты вылил в гитхаб проект с локала как есть,

Есть, сделал! Ссыль та же.

Теперь можно посмотреть что было добавлено, чтобы заготовка заработала с новым API-сервером и появилась страница списка пива https://github.com/linklib/pivo-moscow/commit/e2787bf1b338e1342f4ac22a7279f3131456b7cd

И можно в целом сравнить два репозитория https://github.com/prisma-cms/nextjs/compare/master...linklib:master

А можно посмотреть что нового в текущий момент есть в заготовке по отношению к твоему проекту https://github.com/linklib/pivo-moscow/compare/master...prisma-cms:master

Вот. Теперь можно посмотреть что было добавлено, чтобы заготовка заработала с новым API-сервером и появилась страница списка пива https://github.com/linklib/pivo-moscow/commit/e2787bf1b338e1342f4ac22a7279f3131456b7cd И можно в целом сравнить два репозитория https://github.com/prisma-cms/nextjs/compare/master...linklib:master А можно посмотреть что нового в текущий момент есть в заготовке по отношению к твоему проекту https://github.com/linklib/pivo-moscow/compare/master...prisma-cms:master

Вот. Теперь можно посмотреть что было добавлено, ч

И все-таки накосячил где-то... Закомитить локальную версию не получилось и я склонировал новый репозиторий, закинул туда из архива pages/ и src/ и потом уже комит сделал.

Проект запустился и показывет ровно, что и должен, но изменеия не воспринимается и вообще ругается  GraphQL на незнакомые type  Beer, Place и так далее.

Видимо где-то осталась старая схема базовая. Не подскажешь, как перегенерировать?

И все-таки накосячил где-то... Закомитить локальную версию не получилось и я склонировал новый репозиторий, закинул туда из архива pages/ и src/ и потом уже комит сделал. Проект запустился и показывет ровно, что и должен, но изменеия не воспринимается и вообще ругается  GraphQL на незнакомые type  Beer, Place и так далее. Видимо где-то осталась старая схема базовая. Не подскажешь, как перегенерировать?

И все-таки накосячил где-то... Закомитить локальну

Дима, тема интересная) 

Только обсуждать нужно не здесь. Можно создать проект и делать отдельными задачами, так будет более правильно и удобно. 

В любой момент можно будет посмотреть на каком этапе проект и обсуждать вопросы по каждой задаче в отдельной ветке.

Только не знаю работает этот функционал или нет, смотрю проекты захожу туда, но не вижу там задач. 

Дима, тема интересная) Только обсуждать нужно не здесь. Можно создать проект и делать отдельными задачами, так будет более правильно и удобно. В любой момент можно будет посмотреть на каком этапе проект и обсуждать вопросы по каждой задаче в отдельной ветке. Только не знаю работает этот функционал или нет, смотрю проекты захожу туда, но не вижу там задач.

Дима, тема интересная) Только обсуждать нужно не з

Олег, должно на днях устаканиться) И похоже именно в проекты тема переедет!

Олег, должно на днях устаканиться) И похоже именно

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

Доброго времени суток Дмитрий! С удовольствием в б

<< Закомитить локальную версию не получилось 

Вот тут надо было сразу задавать вопросы что не так.

Вероятнее всего, у тебя при пуше ошибка возникла вот такая:

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

Фиксится просто: надо скачать обновления на локал и все.

А после опять выливаем.

Вылил сюда: https://github.com/Pivkarta/nextjs

Можешь от него по той же схеме ответвиться. Или в этой сделать себе собственную ветку и сливать потом в мастер. Так будет даже правильней.

git push -u origin master
To github.com:Pivkarta/nextjs.git
 ! [rejected]        master -> master (fetch first)
error: failed to push some refs to 'github.com:Pivkarta/nextjs.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.


<< Закомитить локальную версию не получилось Вот тут надо было сразу задавать вопросы что не так. Вероятнее всего, у тебя при пуше ошибка возникла вот такая: Это все потому что в исходный бранч уже прилетели новые коммиты, и твоя локальная версия просто отстает от нее. Фиксится просто: надо скачать обновления на локал и все. git pull origin master А после опять выливаем. git push origin master И все ОК. Вылил сюда: https://github.com/Pivkarta/nextjs Можешь от него по той же схеме ответвиться. Или в этой сделать себе собственную ветку и сливать потом в мастер. Так будет даже правильней.

<< Закомитить локальную версию не получилось Вот т

<< Проект запустился и показывет ровно, что и должен, но изменеия не воспринимается и вообще ругается  GraphQL на незнакомые type  Beer, Place и так далее.

Если показывает, что надо, значит так и есть.

GraphQL не знакомые типы - это, я так понимаю, в VSCode? Расширение? Практически всем GraphQL-расширениям надо указывать путь к схеме. Иначе откуда они узнают о типах? 

Смотри доку своего расширения и укажи путь до схемы src/modules/gql/generated/schema.json

Или пока забей, пока я не выберу какое-то боле менее популярное расширение и не напишу доку.

А в целом по поводу схемы и базы: выполнить надо 3 шага:

1. Убедиться, что есть файл .env и в нем прописан корректный адрес API-шлюза

2. Выполни генерацию типов

NODE_PATH=. ts-node -P tsconfig.server.json src/modules/gql/cli/generateTypes/run

(Если проект пустой и еще нет в проекте пользовательских graphql-запросов, то будет только 4 строчки)

Тут просто не должно быть ошибок, результат типа такого:

Если все эти шаги ОК, значит все ОК.

yarn types
yarn run v1.22.5
$ tsc --pretty --noEmit
Done in 7.59s.


<< Проект запустился и показывет ровно, что и должен, но изменеия не воспринимается и вообще ругается  GraphQL на незнакомые type  Beer, Place и так далее. Видимо где-то осталась старая схема базовая. Не подскажешь, как перегенерировать? Если показывает, что надо, значит так и есть. GraphQL не знакомые типы - это, я так понимаю, в VSCode? Расширение? Практически всем GraphQL-расширениям надо указывать путь к схеме. Иначе откуда они узнают о типах? Смотри доку своего расширения и укажи путь до схемы src/modules/gql/generated/schema.json Или пока забей, пока я не выберу какое-то боле менее популярное расширение и не напишу доку. А в целом по поводу схемы и базы: выполнить надо 3 шага: 1. Убедиться, что есть файл .env и в нем прописан корректный адрес API-шлюза В твоем случае это API_ENDPOINT=https://pivkarta.ru/api/ 2. Выполни генерацию типов yarn generate:types Должно быть так: NODE_PATH=. ts-node -P tsconfig.server.json src/modules/gql/cli/generateTypes/run ✔ Parse configuration ✔ Generate outputs ✔ Parse configuration ✔ Generate outputs ✔ Parse configuration ✔ Generate outputs (Если проект пустой и еще нет в проекте пользовательских graphql-запросов, то будет только 4 строчки) 3. Проверь TS-типы yarn types Тут просто не должно быть ошибок, результат типа такого: Если все эти шаги ОК, значит все ОК.

<< Проект запустился и показывет ровно, что и долж

<< Дима, тема интересная) 

Олег, ты прям как в воду смотришь :) Только вчера Диме говорил, что буду дописывать функционал обсуждений в задачах :)

Постараюсь сегодня сделать.

<< Дима, тема интересная) Только обсуждать нужно не здесь. Можно создать проект и делать отдельными задачами, так будет более правильно и удобно. В любой момент можно будет посмотреть на каком этапе проект и обсуждать вопросы по каждой задаче в отдельной ветке. Только не знаю работает этот функционал или нет, смотрю проекты захожу туда, но не вижу там задач. Олег, ты прям как в воду смотришь :) Только вчера Диме говорил, что буду дописывать функционал обсуждений в задачах :) Постараюсь сегодня сделать.

<< Дима, тема интересная) Только обсуждать нужно н

Николай, приветствую! Спасибо!!

Николай, приветствую! Спасибо!! Сергей: рад!!

Не за что!

Николай, форкнул и... где-то пропускаю важное

1. git clone https://github.com/linklib/pivo-moscow.git

3. Поставил в конфиг https://pivkarta.ru/api/

В терхминале без ошибок, а в консоли хрома - куча 

VM308 _app-a0194a063b3b1d8078bb.js:1 WebSocket connection to 'ws://localhost:3000/api/' failed: Error during WebSocket handshake: Unexpected response code: 308

Николай, форкнул и... где-то пропускаю важное 1. git clone https://github.com/linklib/pivo-moscow.git 2. yarn install 3. Поставил в конфиг https://pivkarta.ru/api/ 4. yarn generate:types Отдал yarn types: yarn run v1.10.1 $ tsc --pretty --noEmit Done in 4.79s. 5. yarn build 6.yarn start В терхминале без ошибок, а в консоли хрома - куча VM308 _app-a0194a063b3b1d8078bb.js:1 WebSocket connection to 'ws://localhost:3000/api/' failed: Error during WebSocket handshake: Unexpected response code: 308 Что это может быть?

Николай, форкнул и... где-то пропускаю важное 1. g

Да все ОК у тебя. Просто websocket не умеет в ws://, умеет только в wss:// Это по соображениям безопасности. Не обращай внимания.

Позже рассмотрим этот момент, сейчас он для нас не критичен.

На боевом сайте, если работает на https://, автоматом включается wss:// и все ОК.

Да все ОК у тебя. Просто websocket не умеет в ws://, умеет только в wss:// Это по соображениям безопасности. Не обращай внимания. Позже рассмотрим этот момент, сейчас он для нас не критичен. На боевом сайте, если работает на https://, автоматом включается wss:// и все ОК.

Да все ОК у тебя. Просто websocket не умеет в ws:/

Тогда какая-то друшгая проблема. Вношу изменения в код: Например <div>Main Page 111111</div> в MainPage/index.tsx - изменения появляются только после 

Тогда какая-то друшгая проблема. Вношу изменения в код: Например <div>Main Page 111111</div> в MainPage/index.tsx - изменения появляются только после yarn build yarn start

Тогда какая-то друшгая проблема. Вношу изменения в

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

А чтобы работало налету (hat reload), надо запускать yarn dev. И я тебе это тоже не раз говорил. А ты не записал.

Алёша :) Логично. Потому что ты запускаешь боевую версию, которую, в свою очередь, надо сначала билдить. А чтобы работало налету (hat reload), надо запускать yarn dev. И я тебе это тоже не раз говорил. А ты не записал.

Алёша :) Логично. Потому что ты запускаешь боевую

Ъ.... Поздравляю Шарик, ты - балбес...

Задача 1. Вывести на страничке пива: название пива, описание, регион, производителя и логотип. Так же нужно сформировать URL ЧПУ и ссылку на источник.

На текущий момент в контенте выводится id, url формируется по id.

Задача 1. Вывести на страничке пива: название пива, описание, регион, производителя и логотип. Так же нужно сформировать URL ЧПУ и ссылку на источник. На текущий момент в контенте выводится id, url формируется по id. pages/beers/[id].tsx

Задача 1. Вывести на страничке пива: название пива

Дима, задачи в комментах пока не создавай. Я готовлю под это функционал.

Дима, задачи в комментах пока не создавай. Я готов

Принято.

Николай, привет! В каком виде выкладывать полезную информацию, как думаешь? Например, как сделать простую страничку About (в коммиты кинул, но почему-то залетело на Pivkarta/nextjs и на linklib/pivo-moscow).

А вот с получением данных для страницы пива пока разобраться не получается)

Николай, привет! В каком виде выкладывать полезную информацию, как думаешь? Например, как сделать простую страничку About (в коммиты кинул, но почему-то залетело на Pivkarta/nextjs и на linklib/pivo-moscow). А вот с получением данных для страницы пива пока разобраться не получается)

Николай, привет! В каком виде выкладывать полезную

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

<< в коммиты кинул, но почему-то залетело на Pivkarta/nextjs и на linklib/pivo-moscow

Один пуш не должен прилетать и туда и туда. Я вижу коммит в linklib/pivo-moscow, но не вижу в Pivkarta/nextjs, как, в принципе, и должно быть. 

Дима, привет! Сегодня точно выкачу топики с привязкой к задачам, вот туда и сможешь вылить. Логично в проектах ставить задачи типа "Сделать страничку О нас" и в нем написать топик и указать коммит. << в коммиты кинул, но почему-то залетело на Pivkarta/nextjs и на linklib/pivo-moscow Один пуш не должен прилетать и туда и туда. Я вижу коммит в linklib/pivo-moscow, но не вижу в Pivkarta/nextjs, как, в принципе, и должно быть.

Дима, привет! Сегодня точно выкачу топики с привяз

Все понял, спасибо!

Добавление переменных в запрос в nextjs

Ну, в графовском запросе у тебя все ОК, то есть ты уже можешь в хук запроса скармливать where.

Вот смотри, вот здесь ты передаешь переменные.

То есть в твоем случае достаточно вернуть так:

  const variables = getVariables(router.query)

  const response = useBeersQuery({
    variables,
  })

const getVariables = (query: ParsedUrlQuery): BeersQueryVariables => {
  const first =
    query.first && typeof query.first === 'string'
      ? parseInt(query.first)
      : undefined

  return {
    first,
    where: {
      name: "Lager Hell Ayinger (Айингер Лагер Хелль) бутылка",
    },
  }
}

Ну, в графовском запросе у тебя все ОК, то есть ты уже можешь в хук запроса скармливать where. Вот смотри, вот здесь ты передаешь переменные. То есть в твоем случае достаточно вернуть так:

Ну, в графовском запросе у тебя все ОК, то есть ты

Спасибо, разбираюсь дальше!

# Николай Ланец aka Fi1osof
**Lead Fullstack Developer / Ментор / Евангелист современного JS‑стека**

---

## О себе

Я — не просто Senior Developer с 2007 года. Я — тот, кто строит продукты будущего на базе современных технологий и помогает другим подниматься на новую ступень айти-карьеры. Создатель и идейный вдохновитель freecode.academy — платформы, где обучение перестает быть скучной обязаловкой и становится настоящим технологическим приключением.

---

## Мой стек и философия разработки

Основу моего рабочего арсенала составляют:

- [Javascript](/technologies/ck1faudv928l40a89c4u9zxlm), [TypeScript](/technologies/ckcvwwx010kov08009u7y2rav)
- [React](/technologies/ck1fawbdw28v20a891k4wlh27), [Next.js](/technologies/ckg2jd4ffr9260730aog66dri)
- [Node.js](/technologies/ckt55wm59272831wo9gg9r8ynx), [GraphQL](/technologies/ck1fawhqk28vu0a8995lqvlsj), [Apollo Client](/technologies/ck2zdcg0vpvc10a89xjmhj1e0), [Nexus](/technologies/ckl2pbh0fxew60730ifl3zozp), [Prisma](/technologies/ck2zdbmi7pv8r0a89ntc2r0f1)
- DevOps: [Docker](/technologies/ck2y1x9lho9cy0a8953xzfjr8), [docker-compose](/technologies/ck2y1xqino9g80a89tsftxin2), [Caddy](/technologies/ck2zd8ovqpuyl0a8909748sbu), [Ubuntu](/technologies/cktu8giks3593911vmle30ztqxt)
- UI-инструменты: [Styled-Components](/technologies/ckk8myysio7lw0730csszvrdw), [Material-UI](/technologies/ckljv3jwd7bgf0730huxlko9n), [react-hook-form](/technologies/ckmx8cn9fmwrv073032e67722)
- Всё актуальное для разработки, CI/CD и автоматизации 
- Эксперименты с [WebGL](/technologies/ckan9anntc12f08003saqttrq), [A‑Frame](/technologies/ck2tgoiz8j37y0a89c7gxsrxc), [Three.js](/technologies/ck2tgns1nj32z0a89vmw7xw3f), [Unreal Engine 4](/technologies/ck7puswy6g4yb07004cdp6lbr), [Elixir](/technologies/ckn0olavrnnzi0730xs8rctn8), [C++](/technologies/cknin1y8lu2fr07307mskn2fn)

---

## Разработка и менторство

- Более 15 лет **hands-on** разработки и проджект‑менеджмента
- Главный разработчик и преподаватель платформы [freecode.academy](https://freecode.academy)
- **Ведущий менти-пул на платформе** — лично выращиваю новых звезд отрасли

### Мои менти и их результаты

| Менти (ФИО \| username)                               | Уровень | Рейтинг |
|-------------------------------------------------------|---------|---------|
| [Попов Дмитрий \| linklib](/users/cjoe890c706ji0d962oismzoe)           | 3       | 315     |
| [Сэт \| defk1lla](/users/ckzh1ita312978121imr9hpqfc64)                 | 3       | 670     |
| [Ксения Матвеева \| Ксения Матвеева](/users/ckz4awwlh10627771imr4wvpb7cj) | 2       | 0       |
| [Михаил \| Balamut](/users/cl1npq92z10258261vmbq0w6vfh2)               | 2       | 0       |
| [Ольга Ершова \| angel](/users/cjoe87zhk00250d969arluevk)              | 1       | 0       |
| [Егор \| rogedkone](/users/cksrdp47d3308261ijuq7wfrxdl)                | 3       | 0       |
| [Roman \| Roman43](/users/ckur2qtt64721431xoboyjcte52)                 | 2       | 0       |
| [Бут Игорь \| santiment](/users/ckttd9x20893951vmltb8t7sha)            | 1       | 0       |

**Доношу простую мысль: успех — это не магия, это осознанная системная работа и кайф от роста.**
Мои менти выводят решения в продакшн, пробиваются в лидеры рейтингов — кому не хочется быть в такой команде?

---

## Почему я?

- **Прокачаю проект** — от TDD архитектуры до культурного CI/CD
- **Вдохновлю команду** — и научу мыслить по‑новому, где ИИ — напарник, а не угроза
- **Выращу мидлов и сеньоров** — доказано платформой и рейтингами моих учеников

**Сила — в сообществе, а техника — это просто смазка для ваших побед. Присоединяйтесь!**

---

## Контакты

- 📧 [n.lanets@freecode.academy](mailto:n.lanets@freecode.academy)
- Телеграм: [@freecode_academy](https://t.me/freecode_academy)

---

**P.S.**: Мой опыт — ваш драйвер роста. Хотите в команду? Ищете менторство? Пишите. Растём вместе!