Query

Всем привет! Продолжаем писать про компоненты конструктора сайтов @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

Николай, всё-таки нужны разъяснения:( 1. Добавляю Query query{ users { id username } } http://joxi.ru/LmG3nzDSwYbDNm 2. Внутрь добавляю Connector http://joxi.ru/4AkOlYeIoK155A ...И дальше вакуум в понимании, что делать?

Дима, не надо скриншотов. Делай свой поддомен, создавай шаблон и присылай на него ссылку. Я же в статье прислал ссылки на шаблоны. А там уже будем разбираться что не так.

Все, вижу, ты сделал поддомен. Вот на него и надо ссылаться. Но лучше на конкретный шаблон. Можно отдельные части шаблона сохранять: http://joxi.ru/MAjz7eNcjLZ9OA По твоему вопросу: 1. Для запросов в Query Есть важный момент, который я забыл упомянуть, но видно в запросах: Для простых списков, как у тебя, надо указывать псевдоним objects: Вот твой запрос: Для запросов с постраничностью надо указывать objectsConnection: 2. Для того, чтобы фильтры работали, надо еще название запроса по названию выборки указывать, то есть как у тебя, то query users... Иначе фильтры не будут понимать для какого типа объекта формироваться. 3. Обязательно указывать лимит first. Ты же не хочешь, чтобы у тебя на странице вывелось несколько тысяч пользователей ;) Это сделает браузер плакать. И надо это свойство передавать именно параметром, чтобы во-первых, можно было в свойствах коннектора его менять http://joxi.ru/RmzYKQaSY5GPRr, а во-вторых, чтобы постраничность работала. 4. Чтобы постраничность работала, надо так же добавить параметр skip.

Кстати, на случай, если ты вдруг не понял как редактировать мои примеры запросов, вот видео: https://youtu.be/t09vm8wBEUU

Дима, в статью дописал ссылку на видео.

Спасибо огромное! Разбираюсь!

Не за что!

Николай, привет! Спасибо за новый видос - встало на место:) Пытаюсь понять, почему картинку не получается вытянуть: https://linklib.prisma-cms.com/ Разбираю твой шаблон со слайдером проектов и там картинка должна вроде прилетать, но не прилетает (и в плэйграунде Image: null воззвращает). Можешь подсказать - куда копать?

крутейшая штука. то, чего давно не хватало. я аж воспылал

я про документацию если что

Дима, привет! К сожалению, там пока не получится картинку вывести. Дело в том, что там Image - это объект. Нужный нам путь - это его свойства path. Его мы можем вывести: http://joxi.ru/EA4KnbqcoxKyB2 Но картинку по этому пути мы не получим, нам надо еще путь добавить. К примеру, если путь uploads/lazy/eacfd9b91eabfc21a38dbf51d733bec0.jpg, то полный путь будет, к примеру /images/thumb/uploads/lazy/eacfd9b91eabfc21a38dbf51d733bec0.jpg или /images/big/uploads/lazy/eacfd9b91eabfc21a38dbf51d733bec0.jpg А этого пока не получится сделать, потому что я еще не добавил функционал склеивания переменных.

Олег, я рад, что ты оценил :)

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

Дима, не за что!