Всем привет!

Продолжаем писать про компоненты конструктора сайтов @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 и t.p. И вот чтобы вывести эти отдельные свойства на странице, используется 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