Logo
บล็อก

🔌 การเข้าถึงข้อมูล REST API จากปลั๊กอิน WordPress

Leonardo Losoviz
โดย Leonardo Losoviz ·

ปลั๊กอิน WordPress หลายตัวเปิดเผยข้อมูลผ่าน REST API แต่ไม่ได้มีเลเยอร์ GraphQL มาให้ ด้วย Gato GraphQL คุณยังสามารถใช้ข้อมูลนั้นในคำขอ GraphQL เพียงครั้งเดียวได้ ส่วนขยาย HTTP Client ช่วยให้คุณเรียก REST endpoint ใดก็ได้และทำงานกับ JSON response โดยตรงใน queries ของคุณ

ดังนั้นเมื่อปลั๊กอินไม่มีการรองรับ GraphQL คุณก็ไม่ได้ถูกจำกัด เพียงแค่ queries REST API ของปลั๊กอินนั้นจาก GraphQL และเก็บทุกอย่างไว้ในที่เดียว

บทความนี้จะแสดงวิธีการทำเช่นนั้น รูปแบบเดียวกันนี้ใช้ได้กับทุกปลั๊กอินที่เปิดเผย REST endpoints

ข้อกำหนดเบื้องต้น

  1. ตรวจสอบให้แน่ใจว่าได้ติดตั้ง ส่วนขยาย HTTP Client แล้ว (รวมอยู่ใน Gato GraphQL Power extensions และ bundles)
  2. กำหนดค่า Allowed URLs เพื่อให้ REST base ของปลั๊กอินได้รับอนุญาต สำหรับคำขอภายในไซต์เดียวกัน ให้อนุญาต URL ของไซต์คุณ (เช่น #https://yoursite.com/wp-json/.*# หรือ REST base ที่แน่นอนของคุณ) ดู การกำหนดค่า URL ที่สามารถส่ง HTTP request ได้

หาก API ของปลั๊กอินต้องการการยืนยันตัวตน คุณจะต้องสร้าง authorization token และส่งผ่านในคำขอ (เช่น ผ่าน headers)

ตัวอย่าง: การดึงข้อมูลการจองนัดหมาย

BookingPress คือปลั๊กอินการจองนัดหมายที่มี REST API endpoints สำหรับดึงข้อมูลการจอง ดังนั้นเราจึงสามารถเรียก endpoints เหล่านั้นจาก GraphQL และดึงข้อมูลการจองได้

เมื่อตรวจสอบเอกสาร BookingPress REST API เราจะเห็นว่า endpoint base ปัจจุบันคือ wp-json/bookingpress/v1

1. แสดงรายการนัดหมาย (collection)

ใช้ _sendJSONObjectCollectionHTTPRequest เมื่อ API คืนค่า รายการ ของรายการ (เช่น อาร์เรย์ของนัดหมาย) หาก API ห่อรายการไว้ในออบเจกต์ (เช่น { "data": [ ... ] }) คุณอาจต้องใช้ _sendJSONObjectItemHTTPRequest แล้วอ่านคุณสมบัติ data จากผลลัพธ์

สร้าง URL จาก home URL ของไซต์โดยใช้ optionValue(name: "home") เพื่อให้ queries เดียวกันทำงานได้ในทุกสภาพแวดล้อม:

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
          }
        ]
      }
    }
  )
}

กำหนด BOOKINGPRESS_API_KEY ในสภาพแวดล้อมของคุณ (เช่น ใน wp-config.php) queries จะอ่านค่านั้นผ่านฟิลด์ _env ของส่วนขยาย PHP Constants and Environment Variables จากนั้น @remove ออกจาก response

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

2. นัดหมายเดี่ยวตาม ID

สำหรับนัดหมายเพียงรายการเดียว ใช้ _sendJSONObjectItemHTTPRequest และสร้าง URL พร้อม ID:

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. การแยกข้อมูลจาก response

คุณสามารถแยกคุณสมบัติเฉพาะที่ต้องการจาก response และนำไปใช้ใน queries ของคุณได้

ใช้ _underJSONObjectProperty เพื่อนำทางไปยังคุณสมบัติจากออบเจกต์ response และ @export เพื่อแยกค่าและทำให้ใช้งานได้ใน queries

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

รูปแบบเดียวกันสำหรับปลั๊กอินอื่นๆ

สำหรับปลั๊กอินใดก็ตามที่เปิดเผย REST endpoints:

  1. ค้นหา base URL และ path (เช่น จากเอกสาร REST/API ของปลั๊กอิน)
  2. เพิ่ม URL นั้น (หรือ regex สำหรับมัน) ในรายการที่อนุญาตของ HTTP Client
  3. หาก API ต้องการการยืนยันตัวตน ให้ใช้ options.headers (หรือ options.auth สำหรับ basic auth) ใน input ของฟิลด์ _send*
  4. ใช้ _sendJSONObjectItemHTTPRequest สำหรับทรัพยากรเดี่ยว และ _sendJSONObjectCollectionHTTPRequest สำหรับรายการ
  5. แยกคุณสมบัติเฉพาะที่ต้องการจาก response และนำไปใช้ใน queries ของคุณ

คุณสามารถรวมฟิลด์ที่รองรับ REST เหล่านี้กับ GraphQL types แบบ native (posts, users ฯลฯ) ไว้ใน queries เดียว เพื่อให้ client ได้รับ response เดียวที่ผสมข้อมูล WordPress core และข้อมูลปลั๊กอินจาก REST API ของพวกเขา

สำหรับตัวอย่างเพิ่มเติมในการเรียก REST และจัดการ responses ดูเอกสารส่วนขยาย HTTP Client และบทแนะนำเรื่องการดึงข้อมูลจาก API ภายนอก

กลับไปยังโพสต์ทั้งหมด

สมัครรับจดหมายข่าวของเรา

ติดตามการอัปเดตทั้งหมดของ Gato GraphQL