Первый флоу за 10 минут

Соберём страницу-каталог: она возьмёт услуги из CMS и нарисует их на сайте. Попутно пройдём весь путь, который вы потом повторите для любой страницы: создать → собрать → сохранить → опубликовать.

Нужен доступ в админку проекта и хотя бы один тип контента с записями. В примере это тип «Услуга» (поля: название, цена, описание), но подойдёт любой ваш тип — блог, товары, сотрудники.

Шаг 1. Создайте флоу

Откройте «Сайт» → вкладку «Флоу» и нажмите «Создать флоу».

Пустой список: пока нет флоу

В диалоге введите Название — например, «Каталог услуг». Slug — короткое латинское имя — сгенерируется сам из названия (katalog-uslug); его можно поправить вручную. Путь — адрес страницы на сайте, например /katalog-uslug.

Диалог создания флоу

Нажмите «Создать флоу». В списке появится строка со статусом «Черновик» — посетители сайта этот флоу пока не видят.

Шаг 2. Посмотрите на холст

Кликните по строке — откроется редактор флоу. На холсте пока единственный узел «Начало» — точка входа, которая есть у каждого флоу. Всё остальное вы добавите сами: карточки-действия и связи между ними.

Новый флоу на холсте

Справа вверху — кнопки «Опубликовать флоу» и «Сохранить черновик». Пока вы собираете схему, пользуйтесь «Сохранить черновик».

Шаг 3. Добавьте узел, который берёт данные

Нажмите «Добавить узел» → «Действие». Справа откроется панель настроек. В поле «Тип действия» выберите GraphQL, а в появившемся «Источнике запроса» — «Вручную» (по умолчанию узел ссылается на библиотеку запросов, а нам нужен собственный запрос).

Заполните два поля:

Запрос — какие записи и какие поля взять. В нашем примере:
```
query {
  services(limit: 50) {
    id
    title
    price
  }
}
```
(services — адрес вашего типа контента во множественном числе; у блога будет posts, у товаров — products и так далее.)
Ключ результата — короткое имя, под которым данные станут доступны шаблону. Впишите catalog.

Панель настроек GraphQL-узла

Шаг 4. Добавьте узел, который рисует страницу

Снова нажмите «Добавить узел» → «Действие» — появится новая карточка, по умолчанию с действием «Отправить email». В панели настроек справа переключите «Тип действия» на «Рендер страницы» и укажите шаблон — файл, который превратит данные в HTML (например, katalog.liquid). Шаблоны редактируются во вкладке «Файлы» (раздел «Сайт»); они, как и флоу, живут с черновиком — правка попадает на сайт после публикации.

Соедините карточки связью: потяните от точки под «Началом» к карточке GraphQL, потом от GraphQL — к «Рендеру страницы». Если карточки встали криво — кнопка «Расположить карточки сверху вниз» вытянет их в аккуратную цепочку, а «Вписать в экран» покажет всю схему целиком.

Должно получиться: Начало → GraphQL → Рендер страницы.

Собранный флоу каталога

Шаг 5. Сохраните черновик и посмотрите превью

Нажмите «Сохранить черновик». Теперь нажмите «Превью» на странице «Сайт» (или откройте адрес с preview- в начале — он есть в подсказке). Превью показывает страницу так, как её увидят посетители — с вашими последними правками.

Превью каталога

Шаг 6. Опубликуйте

Всё устраивает? Вернитесь в редактор флоу и нажмите «Опубликовать флоу». Готово: откройте https://ваш-адрес/katalog-uslug — страница живая.

Живой сайт: каталог услуг

Со следующего раза не придется ничего удалять: правки этого флоу снова попадут в черновик, а живая страница не изменится, пока вы не нажмёте «Опубликовать флоу» ещё раз. Это описано в статье «Черновик, превью и публикация».

Если что-то не получилось

Симптом	Что проверить
Страница отдала ошибку, а не каталог	Имя типа в запросе: оно во множественном числе (`services`, а не `service`).
Карточки есть, а данных в них нет	Путь к данным в шаблоне: список лежит под ключом результата и `.data` — для ключа `catalog` это `catalog.data.services`.
Правки не видны на живом сайте	Нажали ли «Опубликовать флоу» после правок.
В превью всё есть, на сайте — старое	Превью показывает черновик, сайт — опубликованное. Опубликуйте флоу.

Следующая статья: Узлы-действия: что умеет каждый →