Powered by Prisma CMS

Читайте все статьи на prisma-cms.com

Fi1osof
17 мая 2019 г., 14:03
Всем привет!

Продолжаем писать про компоненты конструктора сайтов @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:
query templates ( $first:Int = 10 $skip: Int $where:TemplateWhereInput ){ objectsConnection: templatesConnection ( first: $first skip: $skip where:$where ){ aggregate { count } edges { node { ...template CreatedBy{ ...user } } } } } fragment template on Template @prismaCmsFragmentAllFields{ id name description } fragment user on User @prismaCmsFragmentAllFields{ id }
Connector выполнит запрос на сервер и получит данные в JSON, к примеру вот такие:
{ "data": { "objectsConnection": { "aggregate": { "count": 34 }, "edges": [ { "node": { "id": "cjun0mllg3zue0889bre5nptx", "name": "Page", "description": null, "CreatedBy": { "id": "cjoe87z9f001b0d9683ysg0m4", "username": "Fi1osof" } } }, { "node": { "id": "cjvaf2lsp00cr0a89d4peibrp", "name": "Main router", "description": null, "CreatedBy": { "id": "cjoe87z9f001b0d9683ysg0m4", "username": "Fi1osof" } } }, { "node": { "id": "cjvaf4ts800gv0a89lr3fz83u", "name": "Main page", "description": null, "CreatedBy": { "id": "cjoe87z9f001b0d9683ysg0m4", "username": "Fi1osof" } } } ] } } }
Вот эти данные и надо будет вывести на странице. И в данном случае, так как мы получаем массив объектов, мы используем List View для того, чтобы массив данных objectsConnection в цикле набить в шаблон. В качестве шаблона будут использованы другие компоненты редактора, набитые внутрь компонента List View. И вот получается, что на каждой итерации компонента List View у нас заходит объект типа
{ "node": { "id": "cjun0mllg3zue0889bre5nptx", "name": "Page", "description": null, "CreatedBy": { "id": "cjoe87z9f001b0d9683ysg0m4", "username": "Fi1osof" } } }
В этом объекте есть свойства 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: Вот твой запрос:
query users{ objects:users ( first: 10 ){ id username } }
Для запросов с постраничностью надо указывать objectsConnection:
query usersConnection ( $first: Int = 10 $skip:Int ){ objectsConnection:usersConnection ( first: $first skip: $skip ){ aggregate { count } edges{ node{ id username } } } }
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
А этого пока не получится сделать, потому что я еще не добавил функционал склеивания переменных.
Олег, я рад, что ты оценил :)
Дима, не за что!

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