Logo
Pemrograman dengan API
Pemrograman dengan APIMemasok data ke blok di editor

Memasok data ke blok di editor

Konten di editor WordPress dibuat melalui blok (Gutenberg), yang mengambil datanya dari server melalui sebuah API. WordPress core menggunakan WP REST API, tetapi kita juga dapat menggunakan Gato GraphQL untuk menggerakkan blok kita sendiri.

Mari kita jelajahi bagaimana blok dapat mengambil data dari server GraphQL.

Endpoint

Karena blok digunakan dalam konteks editor WordPress, pengguna sudah masuk (login), sehingga kita dapat terhubung ke endpoint GraphQL internal (hanya dapat diakses di dalam wp-admin) alih-alih endpoint publik.

Endpoint internal blockEditor ini dapat diakses di:

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

Endpoint ini memiliki konfigurasi yang telah ditentukan sebelumnya (yaitu, tidak menerapkan preferensi pengguna dari plugin), sehingga perilakunya konsisten.

Secara praktis, kita juga dapat menunjuk ke variabel global JavaScript GATOGRAPHQL_BLOCK_EDITOR_ADMIN_ENDPOINT, yang berisi URL endpoint.

Anda juga dapat membuat endpoint internal Anda sendiri, dan menentukan konfigurasi khusus yang diperlukan untuk blok Anda (mengaktifkan nested mutations, mengaktifkan namespacing, mendefinisikan CPT apa yang dapat di-query, atau hal lain yang tersedia di Schema Configuration).

Sebagai alternatif, Anda dapat membuat Persisted Queries dan mengambil data darinya (alih-alih dari endpoint). Lihat bagaimana kode klien harus disesuaikan.

Menghubungkan melalui fetch

Kita dapat menggunakan metode fetch standar untuk terhubung ke server.

Kode JavaScript ini mengirimkan query dengan variabel ke server GraphQL, dan mencetak respons ke konsol.

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

Mengirim header nonce REST

Jika Anda perlu menjalankan operasi yang menyertakan nonce REST, tambahkan header X-WP-Nonce.

Cetak variabel JS yang berisi nonce, melalui kode 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')
    );
  }
);

Kemudian sertakan nilai nonce di header fetch:

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

Menghubungkan melalui library klien GraphQL

Anda juga dapat menggunakan library klien GraphQL pilihan Anda untuk terhubung ke server. Beberapa pilihannya adalah:

Berikut adalah contoh menggunakan 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)
}

Plugin Gato GraphQL sendiri menggerakkan blok-bloknya melalui GraphQL, menggunakan library graphql-request.

Lihat kode sumber untuk blok "Schema Configuration" dan data store-nya.