В последнее десятилетие произошел всплеск умных устройств и широко открылись различные каналы взаимодействия. Передовые технологии росли как на дрожжах. GatsbyJs — это популярный генератор статических сайтов с открытым исходным кодом в комплекте с React, GraphQL, Webpack для создания невероятно быстрых веб-сайтов. Давайте посмотрим, как мы можем объединить его с популярной CMS Drupal 8.

Монолитный против развязанного

Типичная CMS имеет объединенные серверную часть и внешний интерфейс, которые являются монолитными. Эта система помогла управлять и доставлять контент огромной пользовательской базе. Но это было много лет назад. Связанная система теперь является препятствием, поскольку бизнес должен обслуживать различные устройства и каналы, внедрять новые интерфейсные фреймворки, которые могут создавать высокопроизводительные веб-сайты.

Drupal зарекомендовал себя как универсальная CMS с ее мощными типами контента и редактором WYSIWYG. В несвязанных системах уровень представления обрабатывается уровнем Javascript, в нашем случае GatsbyJS. Drupal 8 служит серверной частью для моделирования, создания и управления контентом, а данные обслуживаются в форме API.

Системы JAMStack используют возможности крупных игроков Javascript, API и разметки. Сайт JAMstack с Drupal в качестве серверной части или безголовой CMS является ядром несвязанной архитектуры.

GatsbyJS служит во внешнем интерфейсе с мощным GraphQL для извлечения данных из серверной части Drupal. GatsbyJS внутренне использует кодовую базу React, которая упрощает работу разработчиков внешнего интерфейса.

Раздельная архитектура Drupal предлагает два ключевых преимущества по сравнению с тесно связанной архитектурой.

  • Одну систему управления контентом можно использовать для обслуживания нескольких интерфейсов, например вашего сайта Gatsby, мобильного приложения и приложения Smart TV.
  • Вы можете разрабатывать, изменять и обновлять внешний и внутренний интерфейсы независимо друг от друга. Обновление Drupal не требует изменения внешнего вида вашего сайта. Подробнее о несвязанной архитектуре с Гэтсби в здесь

Давайте погрузимся с короткими руками

Я настроил Drupal в своей системе с помощью Acquia dev desktop 2
Я создал базовую страницу и несколько статей. Убедитесь, что у вас включен модуль JSON: API. Это обслуживает API-интерфейсы JSON, необходимые для внешнего интерфейса.

Чтобы проверить, что JSON: API включен и ответы JSON обслуживаются должным образом, проверьте API с любыми клиентами, такими как почтальон или любые другие остальные клиенты. Нажмите URL http://localhost:<port>/jsonapi/node/article, и вы получите ответ JSON, как показано ниже.

Установка Гэтсби

Установите Gatsby CLI глобально, используя npm install -g gatsby-cli.

Создайте новый сайт Gatsby, используя gatsby new gatsby-site.

Перейдите в папку сайта, в нашем случае это gatsby-site. Тогда иди на gatsby develop. Вы увидите, что сайт работает локально по адресу http://localhost:8000
Первоначальная настройка gatsby выполнена. Как я упоминал ранее, мы собираемся использовать GraphQL для получения данных вместо обычного https-запроса. Это помогает получать несколько ресурсов за одну выборку, в отличие от HTTPS-запросов. GraphQL доступен в пакете Gatsby, поэтому вам не нужно искать дальнейшую установку GraphQL. Кроме того, Gatsby предоставляет нам площадку для тестирования запросов GraphQL на http://localhost:8000/__graphql. Чтобы связать наш сайт Drupal с нашим сайтом gatsby, откройте файл gatsby-config.js в корневой папке. Измените базовый URL-адрес, как показано ниже.

{
      resolve: `gatsby-source-drupal`,
      options: {
           baseUrl: `http://localhost:<port of drupal site>/`,
      },
}

Давайте покажем статьи на нашей первой странице.
Импорт GraphQL и UseStaticQuery из gatsby import { useStaticQuery, graphql } from “gatsby” .
Игровая площадка GraphQL выглядит так, как показано ниже. Вы можете разобрать ответ JSON и привязать его к HTML. Звучит просто. На самом деле, нет. Потребовалось некоторое время, чтобы правильно запросить обязательные поля для всех статей с соответствующим изображением. Вам может понадобиться некоторый опыт в правильном составлении запросов по мере увеличения сложности компонентов.

Когда у вас есть доступные данные, вы можете легко связать их с вашими компонентами реагирования и отобразить данные на сайте, что совсем несложно.

Теперь давайте приступим к странице, которую мы создали в Drupal.

Ниже вы найдете запрос для получения содержимого страницы.

{
  allNodePage(filter: {title: {eq: "About US"}}) {
    totalCount
    nodes {
      body {
        value
      }
      relationships {
        field_text_with_image {
          field_text_long {
            value
          }
          relationships {
            field_image {
              localFile {
                url
              }
            }
          }
        }
      }
      title
    }
  }
}

Как и раньше, привяжите соответствующие данные к нашему коду реакции, чтобы отобразить данные на странице о нас. Опытный человек может дополнительно уточнить приведенные выше запросы, чтобы получить необходимые данные. Основным преимуществом использования GraphQL вместо rest API является то, что вы можете получить несколько ресурсов с помощью одного запроса, что в случае rest API вам может потребоваться сделать 2 или 3 запроса GET.

Пожалуйста, дайте мне знать, если статья помогла вам. Удачного кодирования.
Ура !!