Logo
Учебник по схеме
Учебник по схемеУрок 10: Получение структурированных данных из блоков

Урок 10: Получение структурированных данных из блоков

Мы можем перебирать блоки (Gutenberg) в записи и извлекать атрибуты из глубины структуры блока, открывая доступ к этим атрибутам для любой функциональности нашего сайта.

Например, извлекая все URL изображений из блоков core/image в записи, мы можем создать карусель изображений со всеми этими картинками.

Кроме того, поскольку атрибуты блока теперь становятся широко доступными (за пределами редактора блоков), мы можем по-настоящему рассматривать их как структурированный контент и предоставлять их через API для всех наших приложений (например, мобильного приложения или информационного бюллетеня).

Это позволяет нам использовать блоки как единственный источник истины для всего нашего контента и распространять его по различным каналам и приложениям, следуя стратегии COPE («Create Once, Publish Everywhere»).

Данный урок руководства демонстрирует, как получить URL изображений из всех блоков core/image в записи.

Извлечение URL изображений из всех блоков core/image в записи

Этот GraphQL queries использует поле blockFlattenedDataItems для получения всех блоков в записи (включая вложенные блоки) с фильтрацией по типу core/image. Затем он перебирает все элементы, извлекает свойство attributes.url из каждого и использует его для замены значения поля. Наконец, дублирующиеся URL удаляются (на случай если два блока core/image используют одно изображение) с помощью @arrayUnique:

query GetImageBlockImageURLs($postID: ID!) {
  post(by: { id: $postID } ) {
    coreImageURLs: blockFlattenedDataItems(
      filterBy: { include: "core/image" }
    )
      @underEachArrayItem(
        passValueOnwardsAs: "blockDataItem"
      )
        @applyField(
          name: "_objectProperty"
          arguments: {
            object: $blockDataItem,
            by: {
              path: "attributes.url"
            }
          }
          setResultInResponse: true
        )
      @arrayUnique
  }
}

Ответ:

{
  "data": {
    "post": {
      "coreImageURLs": [
        "https://d.pr/i/fW6V3V+",
        "https://gatographql.lndo.site/wp-content/uploads/2022/05/GatoGraphQL-logo-1024x622.jpg",
        "https://gatographql.lndo.site/wp-content/uploads/2022/05/GatoGraphQL-logo-suki-1024x598.webp"
      ]
    }
  }
}

@underEachArrayItem (предоставляется расширением Field Value Iteration and Manipulation) — это составная директива (или «мета-директива»: директива, которая может содержать вложенные директивы), которая перебирает массив элементов и применяет вложенную директиву к каждому из них.

@underEachArrayItem помогает соединять типы GraphQL: она позволяет применить директиву, принимающую значение типа String, к полю, возвращающему значение [String] (и другие комбинации).

Например, в приведённом ниже queries:

  • Поле User.capabilities возвращает [String]
  • Директива @strUpperCase принимает String

Благодаря @underEachArrayItem мы можем привести все элементы capabilities к верхнему регистру:

{
  user(by: { id: 3 }) {
    capabilities
      @underEachArrayItem
        @strUpperCase
  }
}

...что даёт:

{
  "data": {
    "user": {
      "capabilities": [
        "LEVEL_0",
        "READ",
        "READ_PRIVATE_EVENTS",
        "READ_PRIVATE_LOCATIONS"
      ]
    }
  }
}