Николай, всё-таки нужны разъяснения:( 1. Добавляю Query query{ users { id username } } http://joxi.ru/LmG3nzDSwYbDNm 2. Внутрь добавляю Connector http://joxi.ru/4AkOlYeIoK155A ...И дальше вакуум в понимании, что делать?
Всем привет! Продолжаем писать про компоненты конструктора сайтов @prisma-cms/front-editor. Вторым описанным компонентом будет второй по важности компонент - Query, используемый для формирования запросов. Если говорить о том, что компонент HTML Tag главный в плане вывода информации (так как наиболее низкоуровневый и универсальный), то Query - самый главный в плане работы с API, ибо через него можно строить самые разные API-запросы, а результат потом выводить в конечный HTML при помощи других компонентов редактора. Разобрать этот компонент надо детально, потому что он во-первых, не простой, а во-вторых, работает по сути только в связке с другими специальными компонентами, которые я здесь тоже частично опишу, но детально рассмотрим их в отдельных топиках. Итак, сначала опишем общий принцип работы: 1. С помощью компонента Query формируем GraphQL-запрос. Вот здесь есть вводная статья по запросам. По сути в Query вы прописываете так же запрос, как и в плейграунде. И здесь есть важное замечание по этому конструктору: напомню, что не обязательно во фрагментах перечислять все скалярные поля объектов, достаточно для фрагментов указывать директиву @prismaCmsFragmentAllFields. Вот здесь я про это писал. Советую внимательно перечитать и видосы посмотреть. 2. В зависимости того, какой вы запрос прописали в Query (множественную выборку типа users или usersConnection) или запрос на получение одиночного уникального объекта (типа user или resource) вставляем в него компонент Connector (для множественных выборок) или Object Connector (для получения уникальных одиночных объектов). Connector и Object Connector выполняют соответствующие API-запросы на сервер. В дальнейшем Connector и Object Connector скорее всего будут объединены, но пока что так. В свою очередь внутри компонента Connector используется List View для вывода в цикле полученных объектов, а внутри Object Connector используется Object View для вывода полученного одиночного объекта. А уже внутри этих объектов для вывода отдельных полей объектов используется компонент Object Field, в свойствах которого указывается какое свойство объекта выводить. Объясню. К примеру, вы сформировали вот такую выборку в компоненте Query: Connector выполнит запрос на сервер и получит данные в JSON, к примеру вот такие: Вот эти данные и надо будет вывести на странице. И в данном случае, так как мы получаем массив объектов, мы используем List View для того, чтобы массив данных objectsConnection в цикле набить в шаблон. В качестве шаблона будут использованы другие компоненты редактора, набитые внутрь компонента List View. И вот получается, что на каждой итерации компонента List View у нас заходит объект типа В этом объекте есть свойства id, name, description и т.п. И вот чтобы вывести эти отдельные свойства на странице, используется Object Field. То есть в нужных нам местах закидываем компоненты Object Field и прописываем в свойства name наименования нужных нам полей. Вот полный пример шаблона с множественной выборкой: https://front-editor.prisma-cms.com/templates/cjvrzqmaabmz30a89a3b108s6 А вот с одиночной выборкой: https://front-editor.prisma-cms.com/templates/cjvs2i9xsbpn50a89s5kqvyxo UPD: Выложил видео: https://youtu.be/hjMhm8UhSW0
Да. скоро будут объяснения в том числе и по ним, потому что вчера этот механизм еще значительно улучшился и теперь доступен вывод вложенных объектов :)
Супер! Пояснения более чем нужны (по крайней мере для меня:)) Особенно в связке с запросами - выводом выборки...
Всем привет! Этой статьей я начинаю цикл публикаций, посвященных описанию отдельных компонентов конструктора сайтов @prisma-cms/front-editor. В его состав уже сейчас входит довольно много компонентов (каждый из которых для простоты имеет смысл воспринимать как обычные теги в HTML-документе, потому как рендерятся так же по вложенному принципу, просто с дополнительной логикой), и лучше прям сейчас уже начать составлять какую-то документацию, чтобы потом было проще. Для этих целей я решил так же завести отдельный поддомен https://front-editor.prisma-cms.com и на нем будут собираться профильные статьи и вестись обсуждение с примерами. На каждый отдельный тег будет своя отдельная статья. Итак, начинаем мы сегодня с компонента HTML Tag. На мой взгляд это самый интересный компонент, потому как ближе всех остальных к нативному HTML. Я не знаю насколько мой подход костыльный, но я попытался сделать так, чтобы обычный HTML конвертировался в JSON, а JSON конвертировался в HTML. При редактировании текста используется браузерное свойство тега contenteditable. Вот здесь я оставил демо-шаблончик с кратким видеороликом: https://front-editor.prisma-cms.com/templates/cjvr82xweb5tv0a89zmpy2le7
Давай. Посмотрим что получится. Кстати, я забыл упомянуть еще один очень интересный компонент: слайдер. Вот видео смотри: https://www.youtube.com/watch?v=jPp_88OdIvw&feature=youtu.be Можно статику в слайдер набивать, а можно результаты выборки. Вот пример со статикой: https://prisma-cms.com/templates/cjvagpojo02iu0a89xmrdffz2 А вот с динамикой: https://fi1osof.ru/templates/cjvf1brga38250a89r2t3qzyg Но динамика пока в полной мере не проявляется, потому что данные вложенные (картинка проекта - это отдельный объект File). А у меня пока нет конструктора для вложенных объектов. Но скоро появится. В крайнем случае, если делать свой собственный сайт, не сложно добавить кастомный компонент для вывода вложенных данных.