Drupal + React

Headless Drupal - это одна из наиболее актуальных и интересных идей использования Drupal 8. Данный термин подразумевает разделение backend и frontend, при котором Drupal выступает только в роли серверной части, а «клиентом» может быть любой JavaScript-фреймворк, мобильное приложение, ваш собственный «велосипед» и т.д. Основная идея такого подхода заключается в желании полного контроля над отображением контента без необходимости использования тяжёлой системы рендеринга Drupal.

 

RESTful Drupal

Когда у Drupal забирают frontend часть, он становится веб-сервисом. В отличие от Drupal 7, в Drupal 8 достаточно включения модуля RESTful Web Services (поставляется вместе с ядром) для управления сущностями с помощью REST-запросов. Кроме того, данный модуль позволяет создавать Views, которые будут отдавать контент в REST-формате.

При необходимости интерфейса администрирования REST-ресурсов можно установить модуль REST UI.

 

JSON API

При проектировании RESTful веб-сервисов стоит также обратить внимание на модуль JSON API, который является реализацией одноимённой спецификации, определяющей структуру запросов клиента и ответов сервера при извлечении/изменении ресурсов. Для получения функционала модуля требуется только его включение без какой-либо дополнительной настройки. После включения модуля можно управлять сущностями Drupal с помощью стандартных HTTP-запросов GET, POST, PATCH, и DELETE. Проверка доступа к операциям над сущностями выполняется на основе стандартной системы разрешений Drupal.

Следует понимать, что JSON API полностью основан на сущностях, поэтому его нельзя использовать для операций, не связанных с «CRUD». К примеру, регистрация новой учётной записи, авторизация пользователя или запрос нового пароля не являются частью JSON API. Подобные операции следует выполнять с помощью функционала, который предоставляется ядром Drupal.

Расширить функционал JSON API можно с помощью модулей JSON API Extras и JSON API Defaults. Первый даёт возможность тонкой настройки предоставляемых ресурсов, а второй позволяет задать ресурсам простые пути без нагромождения большого количества URL-параметров.

Кстати, в скором времени модуль JSON API может быть добавлен в состав ядра Drupal 8.

 

Интеграция React и Drupal модуля

В случае интеграции React с модулем Drupal речь идёт об использовании React-компонентов в функционале модуля. Сгенерированные JavaScript-файлы подключаются с помощью библиотек.

example:
  version: VERSION
  js:
    js/bundle/first.bundle.js: {}
    js/bundle/second.bundle.js: {}

$build['#attached']['library'][] = 'example_module/example';

«Общение» компонента с сервером реализуется на основе REST-ресурсов, для определения которых имеет смысл использовать связку модулей RESTful Web Services и JSON API. Рассмотрим несколько примеров запросов к ресурсам (код приведён в формате HTTP).

Создать пользователя

POST /entity/user?_format=json HTTP/1.1
Host: drupal8.example
Content-Type: application/json
 
{
  "name": [{ "value": "user@mail.example" }],
  "pass": [{ "value": "thebestpassword" }],
  "status": [{ "value": true }]
}

Авторизовать пользователя

POST /user/login?_format=json HTTP/1.1
Host: drupal8.example
Content-Type: application/json
 
{"name": "user@mail.example", "pass": "thebestpassword"}

Получить токен сессии

GET /session/token HTTP/1.1
Host: drupal8.example

Выйти из текущего аккаунта

POST /user/logout?_format=json HTTP/1.1
Host: drupal8.example
Content-Type: application/json

Получить информацию о пользователе с определённым Email

GET /jsonapi/user/user?filter[mail][value]=user@mail.example HTTP/1.1
Host: drupal8.example

Получить ближайшие 10 опубликованных статей

GET /jsonapi/node/article?filter[status][value]=1&sort=-created&page[limit]=10 HTTP/1.1
Host: drupal8.example

 

RESTful Commerce

Отдельно стоит отметить управление REST-ресурсами для Commerce. Все данные, представляющие собой сущности могут быть получены с помощью JSON API. Однако для корзины в Commerce не определены REST-ресурсы и она не является сущностью, поэтому взаимодействовать с ней подобным образом нельзя. В данном случае следует использовать модуль Commerce Cart API, который предоставляет REST-ресурсы для получения корзины, а также добавления и удаления позиций.

В заключении рассмотрим несколько примеров запросов к ресурсам Commerce (код приведён в формате HTTP).

Получить информацию о товаре, включая вариации, по его ID

GET /jsonapi/commerce_product/product?filter[product_id][value]=1&include=variations HTTP/1.1
Host: drupal8.example

Получить список завершённых заказов

GET /jsonapi/commerce_order/default?filter[state][value]=completed HTTP/1.1
Host: drupal8.example

Получить информацию о корзине

GET /cart?_format=json HTTP/1.1
Host: drupal8.example

Добавить товар в корзину

POST /cart/add?_format=json HTTP/1.1
Host: drupal8.example
Content-Type: application/json
 
[
  {
    "purchased_entity_type": "commerce_product_variation",
    "purchased_entity_id": "1"
  },
  {
    "purchased_entity_type": "commerce_product_variation",
    "purchased_entity_id": "2"	
  }
]

Удалить товар из корзины

DELETE /cart/2/items/10?_format=json HTTP/1.1
Host: drupal8.example