Передача данных блокам в редакторе

Контент в редакторе WordPress создаётся с помощью блоков (Gutenberg), которые получают данные с сервера через API. WordPress core использует WP REST API, но мы также можем использовать Gato GraphQL для питания наших собственных блоков.

Рассмотрим, как блок может получать данные с GraphQL-сервера.

Endpoint

Поскольку блоки используются в контексте редактора WordPress, пользователь уже авторизован, и поэтому мы можем подключиться к внутреннему GraphQL-endpoint (доступному только внутри wp-admin) вместо публичного endpoint.

Этот внутренний endpoint blockEditor доступен по адресу:

https://mysite.com/wp-admin/edit.php?page=gatographql&action=run_query&endpoint_group=blockEditor

Этот endpoint имеет предопределённую конфигурацию (то есть пользовательские настройки плагина к нему не применяются), поэтому его поведение последовательно.

Удобно, что мы также можем обращаться к глобальной JavaScript-переменной GATOGRAPHQL_BLOCK_EDITOR_ADMIN_ENDPOINT, которая содержит URL endpoint.

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

Как вариант, вы можете создать Persisted Queries и получать данные из них (вместо endpoint). Ознакомьтесь с тем, как должен адаптироваться клиентский код.

Подключение через `fetch`

Мы можем использовать стандартный метод fetch для подключения к серверу.

Этот JavaScript-код отправляет запрос с переменными на GraphQL-сервер и выводит ответ в консоль.

(async function () {
  const limit = 3;
  const data = {
    query: `
      query GetPostsWithAuthor($limit: Int) {
        posts(pagination: { limit: $limit }) {
          id
          title
          author {
            id
            name
          }
        }
      }
    `,
    variables: {
      limit: `${ limit }`
    },
  };
 
  const response = await fetch(
    GATOGRAPHQL_BLOCK_EDITOR_ADMIN_ENDPOINT,
    {
      method: 'post',
      body: JSON.stringify(data),
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'Content-Length': data.length,
      },
      credentials: 'include',
    }
  );
 
  /**
   * Execute the query, and await the response
   */
  const json = await response.json();
 
  /**
   * Check if the query produced errors, otherwise use the results
   */
  if (json.errors) {
    console.log(JSON.stringify(json.errors));
  } else {
    console.log(JSON.stringify(json.data));
  }
})();

Отправка заголовка REST nonce

Если вам нужно выполнить операцию с включением REST nonce, добавьте заголовок X-WP-Nonce.

Выведите JS-переменную, содержащую nonce, с помощью PHP-кода:

// Generate HTML in the editor:
// <script type="text/javascript">var WP_REST_NONCE = "{ Nonce value }"</script>
add_action(
  'admin_print_scripts',
  function(): void {
    printf(
      '<script type="text/javascript">var %s = "%s"</script>',
      'WP_REST_NONCE',
      wp_create_nonce('wp_rest')
    );
  }
);

Затем включите значение nonce в заголовки fetch:

// ...
  headers: {
    'X-WP-Nonce': `${ WP_REST_NONCE }`,
    // ...
  };

Подключение через клиентскую библиотеку GraphQL

Вы также можете использовать клиентскую библиотеку GraphQL по вашему выбору для подключения к серверу. Некоторые варианты:

Вот пример с использованием GraphQL request:

/* eslint-disable */
 
const { request, gql } = require(`graphql-request`)
 
main()
 
async function main() {
  const query = gql`
    query {
      posts {
        id
        title
        author {
          id
          name
        }
      }
    }
  `
 
  const data = await request(GATOGRAPHQL_BLOCK_EDITOR_ADMIN_ENDPOINT, query)
  console.log(data)
}

Сам плагин Gato GraphQL питает свои блоки через GraphQL, используя библиотеку graphql-request.

Ознакомьтесь с исходным кодом блока «Schema Configuration» и его data store.

​Endpoint

​Подключение через fetch

​Отправка заголовка REST nonce

​Подключение через клиентскую библиотеку GraphQL

Endpoint

Подключение через `fetch`

Отправка заголовка REST nonce

Подключение через клиентскую библиотеку GraphQL