Blog

๐Ÿ”Œ Mengakses Data REST API dari Plugin WordPress

Leonardo Losoviz
Oleh Leonardo Losoviz ยท

Banyak plugin WordPress yang mengekspos data melalui REST API tetapi tidak menyediakan lapisan GraphQL. Dengan Gato GraphQL Anda tetap bisa menggunakan data tersebut dalam satu permintaan GraphQL: ekstensi HTTP Client memungkinkan Anda memanggil endpoint REST apa pun dan mengolah respons JSON langsung dalam query Anda.

Jadi ketika sebuah plugin tidak memiliki integrasi GraphQL, Anda tidak terjebakโ€”Anda query REST API mereka dari GraphQL dan tetap menjaga semuanya di satu tempat.

Artikel ini menunjukkan cara melakukannya. Pola yang sama berlaku untuk plugin apa pun yang mengekspos endpoint REST.

Prasyarat

  1. Pastikan ekstensi HTTP Client sudah terpasang (termasuk dalam ekstensi dan bundle Gato GraphQL Power).
  2. Konfigurasikan URL yang Diizinkan agar REST base plugin diizinkan. Untuk permintaan ke situs yang sama, izinkan URL situs Anda (misalnya #https://situsanda.com/wp-json/.*# atau REST base Anda yang tepat). Lihat mengonfigurasi URL mana yang dapat di-HTTP request.

Jika API plugin memerlukan otorisasi, Anda perlu membuat token otorisasi dan meneruskannya dalam permintaan (misalnya melalui headers).

Contoh: Mengambil Data Pemesanan Janji Temu

BookingPress adalah plugin pemesanan janji temu yang menyediakan endpoint REST API untuk mengambil data janji temu. Oleh karena itu, kita bisa memanggil endpoint tersebut dari GraphQL dan mengambil data janji temu.

Dengan memeriksa dokumentasi REST API BookingPress, kita melihat bahwa base endpoint saat ini adalah wp-json/bookingpress/v1.

1. Daftar Janji Temu (koleksi)

Gunakan _sendJSONObjectCollectionHTTPRequest ketika API mengembalikan daftar item (misalnya array janji temu). Jika API membungkus daftar dalam sebuah objek (misalnya { "data": [ ... ] }), Anda mungkin perlu menggunakan _sendJSONObjectItemHTTPRequest lalu membaca properti data dari hasilnya.

Bangun URL dari URL home situs Anda menggunakan optionValue(name: "home") agar query yang sama berfungsi di lingkungan mana pun:

query GetBookingPressAppointments {
  siteURL: optionValue(name: "siteurl")
    @remove
 
  restBase: _sprintf(
    string: "%s/wp-json/bookingpress/v1/appointments",
    values: [$__siteURL]
  )
    @remove
 
  bookingpressApiKey: _env(name: "BOOKINGPRESS_API_KEY")
    @remove
 
  authorizationHeader: _sprintf(
    string: "x-bookingpress-api-key %s",
    values: [$__bookingpressApiKey]
  )
    @remove
 
  appointments: _sendJSONObjectCollectionHTTPRequest(
    input: {
      url: $__restBase,
      method: GET,
      options: {
        headers: [
          {
            name: "Authorization",
            value: $__authorizationHeader
          }
        ]
      }
    }
  )
}

Definisikan BOOKINGPRESS_API_KEY di lingkungan Anda (misalnya di wp-config.php). Query membacanya melalui field _env dari ekstensi PHP Constants and Environment Variables, lalu @removes dari respons.

// In wp-config.php
define( 'BOOKINGPRESS_API_KEY', 'your-secret-key' );

2. Satu Janji Temu berdasarkan ID

Untuk satu janji temu, gunakan _sendJSONObjectItemHTTPRequest dan bangun URL dengan ID-nya:

query GetBookingPressAppointment($appointmentId: ID!) {
  siteURL: optionValue(name: "siteurl")
    @remove
 
  restURL: _sprintf(
    string: "%s/wp-json/bookingpress/v1/appointments/%s",
    values: [$__siteURL, $appointmentId]
  )
    @remove
 
  bookingpressApiKey: _env(name: "BOOKINGPRESS_API_KEY")
    @remove
 
  authorizationHeader: _sprintf(
    string: "x-bookingpress-api-key %s",
    values: [$__bookingpressApiKey]
  )
    @remove
 
  appointment: _sendJSONObjectItemHTTPRequest(
    input: {
      url: $__restURL,
      method: GET,
      options: {
        headers: [
          {
            name: "Authorization",
            value: $__authorizationHeader
          }
        ]
      }
    }
  )
}

3. Mengekstrak Data dari Respons

Anda dapat mengekstrak properti tertentu dari respons yang Anda butuhkan, dan menggunakannya dalam query Anda.

Gunakan _underJSONObjectProperty untuk menavigasi ke properti dari objek respons, dan @export untuk mengekstrak nilai dan membuatnya tersedia dalam query.

query GetBookingPressAppointment($appointmentId: ID!) {
  # ...
  appointment: _sendJSONObjectItemHTTPRequest(
    input: {
      url: $__restURL,
      method: GET,
      options: {
        headers: [
          {
            name: "Authorization",
            value: $__authorizationHeader
          }
        ]
      }
    }
  )
    @underJSONObjectProperty(by: { path: "data.id" })
      @export(as: "appointmentId")
    @underJSONObjectProperty(by: { path: "data.selected_date" })
      @export(as: "selectedDate")
    @underJSONObjectProperty(by: { path: "data.start_time" })
      @export(as: "startTime")
    @underJSONObjectProperty(by: { path: "data.service_id" })
      @export(as: "serviceId")
    @underJSONObjectProperty(by: { path: "data.customer_id" })
      @export(as: "customerId")
}
 
query DoSomethingWithTheAppointment @depends(on: "GetBookingPressAppointment") {
{
  # Do something with the appointment data
  appointmentId: _echo(value: $appointmentId)
  selectedDate: _echo(value: $selectedDate)
  startTime: _echo(value: $startTime)
  serviceId: _echo(value: $serviceId)
  customerId: _echo(value: $customerId)
}

Pola yang Sama untuk Plugin Lain

Untuk plugin apa pun yang mengekspos endpoint REST:

  1. Temukan URL base dan path-nya (misalnya dari dokumentasi REST/API plugin).
  2. Tambahkan URL tersebut (atau regex untuk itu) ke daftar yang diizinkan di HTTP Client.
  3. Jika API memerlukan autentikasi, gunakan options.headers (atau options.auth untuk basic auth) dalam input ke field _send*.
  4. Gunakan _sendJSONObjectItemHTTPRequest untuk satu resource dan _sendJSONObjectCollectionHTTPRequest untuk daftar.
  5. Ekstrak properti tertentu dari respons yang Anda butuhkan, dan gunakan dalam query Anda.

Anda dapat menggabungkan field berbasis REST ini dengan tipe GraphQL native (posts, users, dll.) dalam satu query, sehingga klien mendapatkan satu respons yang memadukan data inti WordPress dan data plugin dari REST API mereka.

Untuk contoh lebih lanjut tentang memanggil REST dan menangani respons, lihat dokumentasi ekstensi HTTP Client dan tutorial tentang mengambil data dari API eksternal.


Berlangganan newsletter kami

Tetap update dengan semua pembaruan Gato GraphQL.