🎯 ยินดีด้วย: WordPress plugin ของคุณกลายเป็นฟีเจอร์ "core" แล้ว

เนื่องจาก WP REST API ถูกรวมอยู่ใน WordPress core แล้ว ผมมักแนะนำให้หลีกเลี่ยง GraphQL และใช้ REST API แทนเพื่อส่งข้อมูลให้กับ WordPress plugins และ Gutenberg blocks ของเรา

แต่ตอนนี้ไม่จำเป็นอีกต่อไปแล้ว WordPress 6.5 เพิ่งเปิดตัว พร้อมฟีเจอร์ใหม่ที่น่าทึ่ง: Plugin Dependencies

ด้วย Plugin Dependencies WordPress plugin ใดก็ตามที่มีอยู่ในไดเรกทอรี plugin สามารถถูกกำหนดให้เป็น dependency ของ plugin ของเรา และ WordPress จะติดตั้ง dependency นั้นทันทีก่อนที่จะติดตั้ง plugin ของเรา

ผลที่ตามมาคือ ทุก plugin ในไดเรกทอรีกลายเป็นฟีเจอร์ "core" โดยพื้นฐาน เนื่องจากมันจะถูกติดตั้งโดยอัตโนมัติเมื่อ plugin อื่นต้องการ

บางกรณีก็ชัดเจนและไม่ค่อยจำเป็น เช่น WooCommerce add-on ประกาศ dependency กับ WooCommerce เพราะเจ้าของเว็บไซต์น่าจะใช้ WooCommerce อยู่แล้ว

แต่เมื่อ plugin ที่ต้องการนั้นให้ "เครื่องมือ" สำหรับ plugin อื่น และเราไม่สามารถคาดหวังว่าเจ้าของเว็บไซต์จะติดตั้ง plugin นั้นไว้ล่วงหน้า (หรือแม้แต่รู้ว่ามันมีอยู่) ผลลัพธ์ที่ได้ก็จะมีผลกระทบอย่างมาก

นั่นคือกรณีของ GraphQL และ Gato GraphQL

​

GraphQL กลายเป็นฟีเจอร์ "core" ใน WordPress

GraphQL เป็น interface สำหรับดึง แก้ไข และจัดเก็บข้อมูลทุกชิ้นจากเว็บไซต์ WordPress plugin ใดก็ตามที่ต้องการโต้ตอบกับข้อมูล (ซึ่งเกือบทุก plugin ทำ) สามารถนำ GraphQL มาใช้ตอบสนองความต้องการได้

GraphQL คือ "เครื่องมือ" และ Gato GraphQL คือผู้ให้บริการเครื่องมือนั้น

ด้วยการที่ plugin ของคุณประกาศ dependency กับ Gato GraphQL GraphQL server จะพร้อมใช้งานสำหรับ plugin ของคุณทันที

ตัวอย่างเช่น คุณสามารถใช้ GraphQL เพื่อดึงข้อมูลสำหรับ Gutenberg blocks ของ plugin และหลีกเลี่ยงการสร้าง (และดูแลรักษา) REST controllers

เป็นครั้งแรกที่นักพัฒนา plugin สามารถพิจารณา GraphQL เป็นทางเลือกที่แท้จริงสำหรับ WP REST API

​

Dependency ของ plugin จะกลายเป็นปัญหาได้ไหม?

เนื่องจาก plugin ที่ถูกติดตั้งในฐานะ dependency จะปรากฏใน wp-admin เจ้าของเว็บไซต์ที่ไม่รู้เรื่องอาจตั้งคำถามอย่างสมเหตุสมผลว่า "มันมาจากไหน? โดนแฮ็กหรือเปล่า? เป็นสแปมไหม? เกิดอะไรขึ้นที่นี่?"

หากเจ้าของเว็บไซต์รู้สึกรำคาญ นั่นก็น่าเป็นห่วง เพราะไม่มี plugin ไหนที่จะสร้างศัตรูกับผู้ใช้ได้ (อย่างน้อยก็จนกว่าพวกเขาจะเข้าใจว่าเกิดอะไรขึ้นและยินดีรับโซลูชัน)

สถานการณ์นี้สามารถปรับปรุงได้ และแม้แต่หลีกเลี่ยงได้อย่างสมบูรณ์ ตัวอย่างเช่น หากพิจารณา Gato GraphQL เป็น plugin dependency Gato GraphQL ก็อาจมี plugin เวอร์ชัน Lite ซึ่งเพียงแค่ติดตั้ง GraphQL server สำหรับการใช้งานภายในเท่านั้น ไม่แสดงผ่าน UI (อีกหนึ่งงานสำหรับ TODO list ของผม! 🤷🏻‍♂️)

คำถามที่สำคัญกว่าสำหรับ Gato GraphQL (และ plugins อื่น ๆ ด้วย) คือ: เว็บไซต์ใหม่จะมีความปลอดภัยน้อยลงไหม?

โดยเฉพาะสำหรับ Gato GraphQL: public GraphQL endpoint จะเปิดเผยข้อมูลที่ผู้เยี่ยมชมทุกคนเข้าถึงได้ และอาจเผยข้อมูลส่วนตัวโดยไม่ตั้งใจหรือไม่?

คำตอบคือไม่ Gato GraphQL โดยค่าเริ่มต้นจะไม่เปิดใช้ public single endpoint ดังนั้นจึงสามารถติดตั้งได้โดยไม่ต้องกังวลเรื่องความเสี่ยงด้านความปลอดภัย

​

การเพิ่ม Gato GraphQL เป็น plugin dependency

มาลองใช้มือจัดการกับฟีเจอร์ใหม่ที่น่าทึ่งนี้กันดูเลย

เพื่อให้สามารถใช้ GraphQL ใน plugin ของคุณ คุณจะต้องประกาศ gatographql เป็น plugin dependency ใน plugin header:

/**
 * Plugin Name: Blocks for cooking recipes
 * Requires Plugins: gatographql
 */Copy

จากนั้น plugin ของคุณสามารถเข้าถึงข้อมูลผ่านinternal blockEditor endpoint ที่มีอยู่ภายใต้ JavaScript constant GATOGRAPHQL_BLOCK_EDITOR_ADMIN_ENDPOINT ใน wp-admin ซึ่งชี้ไปที่ URL นี้:

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

ตัวอย่างเช่น block สามารถดึงข้อมูลโดยใช้ JavaScript code แบบนี้:

(async function () {
  const data = {
    query: `
      query GetCookingRecipeBlockData($limit: Int) {
        posts(pagination: { limit: $limit }) {
          id
          title
          author {
            id
            name
          }
        }
      }
    `,
    variables: {
      limit: 3
    },
  };
 
  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));
  }
})();Copy

หากคุณต้องการใช้ nested mutations ใน GraphQL queries ของคุณ คุณยังสามารถสร้าง internal endpoint ที่เป็นของ plugin ของคุณโดยเฉพาะ และกำหนดค่าตามต้องการได้