5 мая 2019 г., 10:45
Prisma-cms@2.16.7 Улучшенный редактор сайта + конструктор запросов.
Всем привет!
Давно я не писал, но работа над prisma-cms идет полным ходом, и хотя еще конечно же не все сделано, тем не менее появились новые мощные фишки, о которых я и хотел бы коротко поведать.
1. Конструктор запросов
В прошлой заметке я публиковал небольшой видос про формирование выборок с помощью компонента Connector, который в свою очередь включает в себя Filters, Pagination и ListView. ListView используется для того, чтобы вывести в цикле полученные объекты. И вот если посмотреть указанное видео, то видно, что мы из списка выбираем нужный нам запрос (в нашем случае это usersConnection) и у нас сразу формируется выборка, которую мы в итоге оформляем в нужном нам виде. Так вот, запрос-то мы выбираем из предложенных, но что это за запрос, мы просто так не увидим. Но если кому интересно, этот запрос можно найти в исходниках вот здесь.
Вообще это долгая и запутанная история. Поведаю ее очень коротко, чтобы не наскучить... Если вы когда-нибудь пробовали выполнять GraphQL-запросы, то наверняка знаете, что в формируемом запросе надо перечислять все нужные вам поля. А сказать "верни мне все поля для нужного объекта" - вот такого в GraphQL нельзя сделать. Можете сами загуглить вопросы типа graphql all fields. Я не раз пытался, все ответы сводятся к "так сделать нельзя". А если нет возможности получить все поля, то сильно страдает связь с backend, ведь на сервере могу добавиться или удалиться какие-нибудь поля у объектов (да и целые объекты), и если во фронте перечисленные поля сильно вшиты в сформированные запросы, то актуализация API каждый раз будет требовать переписывание запросов и пересборку фронта. Мне же всегда хотелось, что это было максимально автоматизировано. В свое время я для обхода этого ограничения писал генерацию API-фрагментов. В статье Разворачиваем у себя копию MODX-Клуба в 4-ом пункте инструкции я писал про эту генерацию через команду yarn build-api-fragments. Если кто пробовал развернуть у себя сайт, тоже выполняли эту команду. Когда мы ее вызываем, скрипт забирает по API GraphQL-схему и формирует js-фрагменты для всех типов. В свою очередь в запросах я прописывал фрагменты, а не непосредственно перечислял поля. Таким образом, если на сервере что-то поменялось, то просто пересобрав фрагменты, мы получали актуальные поля в запросах. В приведенных выше исходниках легко найти эти фрагменты. Но все мне это не очень нравилось, так как динамика не была полноценная и все равно была привязка в бэкэнду, весь если переключиться во фронте на другой API-источник, там схема могла отличаться и поля у объектов отличаться, и запросы могли легко поломаться. Чтобы решить эту проблему. я давно уже замысливал конструктор запросов GraphQL, чтобы можно было прям во фронте писать запросы и использовать их далее в элементах интерфейса. Я в свое время потратил на него не мало времени, но закончить начатое тогда я не сумел, ибо все это было сложно, да и конечной точки применения я не видел, поэтому отложил тогда до лучших времен. А вот сейчас с разработкой конструктора сайтов мне опять понадобился этот механизм, и старые наработки очень пригодились. И хотя тот компонент я не доработал до той версии, как я хотел (при чем в найденных исходниках оказалось гораздо меньше, чем я тогда сделал, видимо часть наработок все-таки потерял), тем не менее я смог это воткнуть в свой конструктор и использовать по назначению. Вот видео как это работает: https://youtu.be/iGnbJ1yMna0.
Вот это уже больше похоже на правду и работает на основании реальной схемы конечного API-источника, а не сервера сайта. В целом можно на одной странице использовать редакторы запросов сразу для нескольких API-источников (соответственно каждый для своего источника в отдельности). И если вы видео внимательно посмотрите, то можете увидеть, что и проблема получения всех полей для объектов там тоже решается. Для этого я вот такой хак придумал: зарегистрировал кастомную директиву prismaCmsFragmentAllFields, и если у фрагмента она указана, то для фрагемента из схемы выбираются все скалярные поля этого типа и добавляются во фрагмент. Если кому интересен программный код, вот здесь лежит.
Если вы еще не выполняли GraphQL-запросы, но интересно что это такое и как работает, вот здесь быстрый старт по GraphQL.
2. Значительно улучшенный редактор сайтов
Конечно же и он еще сильно далек от желаемого, но тем не менее, уже сейчас он позволяет сделать значительно больше, чем было раньше. Посмотрите внимательно видео.
Сейчас я в детали особо вдаваться не буду (спрашивайте в комментариях, если есть вопросы), но отмечу несколько моментов:
- Этот сайт теперь тоже все больше и больше из отдельных частей начинает состоять. Вот, к примеру, главная страница. А вот первый блок главной страницы. Вот последние комментарии. Это получается своего рода такой майнкрафт для сайта, можно создавать отдельные части и использовать их для создания новых, более крупных. При чем можно использовать как визуальный редактор, так и вставлять кастомный JSON. Можно описать любой HTML-тег (исключил только script и link), вставить любые стили CSS (в формате camel case).
Как создавать свои собственные компоненты со своей программной логикой, опишу позже в отдельной статье.
- Для всех этих шаблонов есть теперь отдельная страница: https://prisma-cms.com/templates/. Все создаваемые и обновляемые компоненты собираются в этом разделе. Позже появится маркетплейс и возможность подтягивать готовые компоненты из каталога на свои собственные призма-сайты.
В общем, все те, кто обвинял меня в отсутствии вкуса и что здесь все оформлено как попало, имеют теперь возможность создать собственные блоки для оформления и представить общественности.