Query

Fi1osof
17 мая 2019 г., 14:03

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:
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
Дима, не за что!

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