Headless архитектура и WP-JSON

Headless WooCommerce: Отделяем витрину от движка

В традиционной архитектуре WordPress тема тесно связана с бэкендом. В модели Headless CMS WordPress и WooCommerce выступают исключительно в роли API-сервера, предоставляя данные для независимого фронтенд-приложения, написанного, например, на React. Такой подход разделяет управление контентом и его представление, что дает значительную гибкость в дизайне и производительности. Фронтенд и бэкенд общаются через REST API или GraphQL, полностью отказываясь от PHP-шаблонов и цикла WordPress.

Работа с WooCommerce REST API

WooCommerce расширяет стандартный WordPress REST API, добавляя собственные эндпоинты для управления товарами, заказами, клиентами и другими сущностями. Основной префикс для этих маршрутов — /wp-json/wc/v3/.

GET /wp-json/wc/v3/products
GET /wp-json/wc/v3/products/<id>
GET /wp-json/wc/v3/products/categories
GET /wp-json/wc/v3/orders
POST /wp-json/wc/v3/orders

Эти эндпоинты позволяют выполнять полный набор CRUD-операций. Например, для получения списка товаров ваше React-приложение отправит GET-запрос на /wp-json/wc/v3/products. Ответ будет содержать массив объектов JSON, каждый из которых представляет товар со всей его информацией: цена, описание, изображения и атрибуты.

Кроме основного API, WooCommerce предоставляет эндпоинты для аналитики в пространстве имен /wc-analytics, которые могут быть полезны для создания кастомных дашбордов и отчетов.

Аутентификация запросов

Для публичных данных, таких как список товаров, аутентификация не требуется. Однако для действий, связанных с пользователем (создание заказа, просмотр истории покупок), необходима авторизация. Существует два основных подхода:

Application Passwords: Встроенный в WordPress механизм, идеально подходящий для сервер-серверных взаимодействий. Вы генерируете пароль для конкретного приложения и используете его для Basic Auth. Этот метод не подходит для клиентских приложений, так как раскрывает учетные данные.
JWT (JSON Web Tokens): Наиболее популярный метод для headless-архитектур. После аутентификации пользователя (например, через стандартный эндпоинт /wp-json/jwt-auth/v1/token), сервер выдает JWT, который затем прикрепляется к заголовку Authorization каждого последующего запроса. Это позволяет серверу идентифицировать и авторизовать пользователя для выполнения защищенных действий.

Пример заголовка с JWT: Authorization: Bearer <your_jwt_token>.

Настройка CORS и сравнение с GraphQL

При работе с headless-архитектурой, где фронтенд и бэкенд находятся на разных доменах (или портах), вы столкнетесь с политикой одного источника (Same-Origin Policy). Для ее обхода необходимо настроить CORS на стороне WordPress, чтобы разрешить запросы с домена вашего React-приложения.

Это можно сделать, добавив несколько строк в файл functions.php вашей темы или в отдельный плагин:

add_action( 'rest_api_init', function() {
    remove_filter( 'rest_pre_serve_request', 'rest_send_cors_headers' );
    add_filter( 'rest_pre_serve_request', function( $value ) {
        header( 'Access-Control-Allow-Origin: *' ); // Или укажите конкретный домен
        header( 'Access-Control-Allow-Methods: GET, POST, PUT, DELETE' );
        header( 'Access-Control-Allow-Credentials: true' );
        return $value;
    });
}, 15 );

Хотя REST API WooCommerce является мощным инструментом, у него есть недостатки, особенно в плане производительности. Основная проблема — это N+1 запросы, когда для получения связанных данных приходится делать множество последовательных запросов. Например, чтобы получить 10 товаров и их категории, вам может потребоваться 11 запросов: один для товаров и десять для категорий каждого товара.

GraphQL решает эту проблему, позволяя клиенту точно указать, какие данные ему нужны, и получить их все в одном запросе. Это значительно сокращает количество сетевых вызовов и улучшает производительность.

Feature	REST API	GraphQL
Data Fetching	Multiple endpoints, fixed data structure	Single endpoint, flexible queries
Over/Under-fetching	Common issue	Eliminated by design
Performance	Can lead to N+1 query problem	Reduces network requests, efficient
Schema & Typing	Relies on documentation (OpenAPI)	Strongly typed schema, self-documenting
Caching	Standard HTTP caching	More complex, often requires custom logic
Ecosystem	Mature, wide support in WordPress	Growing, requires plugins like WPGraphQL

Подход, основанный на схеме (Schema-first), становится все более популярным. Используя GraphQL, вы начинаете с определения схемы данных. Эта схема становится контрактом между фронтендом и бэкендом. Инструменты, такие как GraphQL Code Generator, могут автоматически создавать TypeScript-типы и хуки для React Query или Apollo Client, что значительно ускоряет разработку и уменьшает количество ошибок.

Quiz Questions 1/6

Что является ключевой особенностью headless-архитектуры WordPress?

Quiz Questions 2/6

Какой префикс по умолчанию используется для эндпоинтов REST API WooCommerce (версия 3)?

Headless WooCommerce на React и Node.js