Logo
Lập trình với API
Lập trình với APICấp dữ liệu cho các block trong trình biên soạn

Cấp dữ liệu cho các block trong trình biên soạn

Nội dung trong trình biên soạn WordPress được tạo ra thông qua các block (Gutenberg), chúng lấy dữ liệu từ máy chủ qua một API. Lõi WordPress sử dụng WP REST API, nhưng chúng ta cũng có thể dùng Gato GraphQL để cung cấp dữ liệu cho các block của riêng mình.

Hãy cùng tìm hiểu cách block có thể lấy dữ liệu từ máy chủ GraphQL.

Endpoint

Vì các block được sử dụng trong ngữ cảnh của trình biên soạn WordPress, người dùng đã đăng nhập sẵn, do đó chúng ta có thể kết nối đến một endpoint GraphQL nội bộ (chỉ truy cập được trong wp-admin) thay vì một endpoint công khai.

Endpoint nội bộ blockEditor này có thể truy cập tại:

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

Endpoint này có cấu hình được định nghĩa sẵn (tức là không áp dụng tùy chọn người dùng từ plugin), vì vậy hành vi của nó nhất quán.

Một cách tiện lợi, chúng ta cũng có thể trỏ đến biến toàn cục JavaScript GATOGRAPHQL_BLOCK_EDITOR_ADMIN_ENDPOINT, chứa URL của endpoint.

Bạn cũng có thể tạo endpoint nội bộ của riêng mình, và định nghĩa trước bất kỳ cấu hình cụ thể nào cần thiết cho các block của bạn (bật nested mutations, bật namespacing, xác định các CPT nào có thể được truy vấn, hoặc bất kỳ thứ gì khác có sẵn trong Schema Configuration).

Ngoài ra, bạn có thể tạo Persisted Queries và lấy dữ liệu từ chúng (thay vì từ một endpoint). Xem cách mã phía client cần được điều chỉnh.

Kết nối qua fetch

Chúng ta có thể sử dụng phương thức fetch tiêu chuẩn để kết nối đến máy chủ.

Đoạn mã JavaScript này gửi một query kèm biến đến máy chủ GraphQL, và in phản hồi ra console.

(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));
  }
})();

Gửi header nonce của REST

Nếu bạn cần thực hiện một thao tác kèm theo REST nonce, hãy thêm header X-WP-Nonce.

In một biến JS chứa nonce qua mã 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')
    );
  }
);

Sau đó đưa giá trị nonce vào headers của fetch:

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

Kết nối qua thư viện client GraphQL

Bạn cũng có thể sử dụng thư viện client GraphQL theo lựa chọn của mình để kết nối đến máy chủ. Một số tùy chọn là:

Đây là một ví dụ sử dụng 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)
}

Chính plugin Gato GraphQL cũng cung cấp dữ liệu cho các block của nó qua GraphQL, sử dụng thư viện graphql-request.

Xem mã nguồn của block "Schema Configuration" và data store của nó.