Всем привет!
Продолжаем писать про компоненты конструктора сайтов @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
Дима, в статью дописал ссылку на видео.
Спасибо огромное! Разбираюсь!
Не за что!
Николай, привет! Спасибо за новый видос - встало на место:)
Разбираю твой шаблон со слайдером проектов и там картинка должна вроде прилетать, но не прилетает (и в плэйграунде Image: null воззвращает).
Можешь подсказать - куда копать?
крутейшая штука. то, чего давно не хватало. я аж воспылал
я про документацию если что
Дима, привет!
К сожалению, там пока не получится картинку вывести. Дело в том, что там Image - это объект. Нужный нам путь - это его свойства path. Его мы можем вывести: http://joxi.ru/EA4KnbqcoxKyB2
Но картинку по этому пути мы не получим, нам надо еще путь добавить. К примеру, если путь uploads/lazy/eacfd9b91eabfc21a38dbf51d733bec0.jpg, то полный путь будет, к примеру /images/thumb/uploads/lazy/eacfd9b91eabfc21a38dbf51d733bec0.jpg или /images/big/uploads/lazy/eacfd9b91eabfc21a38dbf51d733bec0.jpg
А этого пока не получится сделать, потому что я еще не добавил функционал склеивания переменных.
Олег, я рад, что ты оценил :)
Понял, спасибо!
Дима, не за что!