บทช่วยสอน Schema
บทช่วยสอน Schemaบทเรียนที่ 17: การเพิ่มบล็อกที่จำเป็นโดยอัตโนมัติ

บทเรียนที่ 17: การเพิ่มบล็อกที่จำเป็นโดยอัตโนมัติ

ทุกครั้งที่มีการสร้างโพสต์ใหม่ เราสามารถใช้ฟีเจอร์ระบบอัตโนมัติเพื่อตรวจสอบและแก้ไขเนื้อหาของโพสต์ได้

query ในบทเรียนนี้จะตรวจสอบว่ามีบล็อกที่จำเป็นบางบล็อกอยู่ในโพสต์หรือไม่ และเมื่อไม่มี ก็จะเพิ่มเข้าไป

GraphQL query สำหรับเพิ่มบล็อกที่ขาดหายไป

เพื่อให้ GraphQL query นี้ทำงานได้ Schema Configuration ที่ใช้กับ endpoint จะต้องเปิดใช้งาน Nested Mutations

GraphQL query นี้จะตรวจสอบว่าบล็อกที่จำเป็น wp:comments ถูกเพิ่มเข้าไปในโพสต์แล้วหรือยัง หากขาดหายไป ก็จะถูกเพิ่มไว้ที่ส่วนล่างสุดของเนื้อหา

บันทึกเนื้อหานี้เป็น Persisted Query โดยใช้ slug insert-mandatory-comments-block-if-missing:

query CheckIfCommentsBlockExists($postId: ID!) {
  posts(
    filter: {
      ids: [$postId]
      search: "\"<!-- /wp:comments -->\""
    }
  ) {
    id
  }
  blockExists: _notEmpty(value: $__posts)
    @export(as: "blockExists")
}
 
mutation MaybeInsertCommentsBlock($postId: ID!)
  @depends(on: "CheckIfCommentsBlockExists")
  @skip(if: $blockExists)
{
  post(by: { id: $postId }) {
    id
    rawContent
    adaptedRawContent: _strAppend(
      after: $__rawContent
      append: """
 
<!-- wp:comments -->
<div class="wp-block-comments"><!-- wp:comments-title /-->
 
<!-- wp:comment-template -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"40px"} -->
<div class="wp-block-column" style="flex-basis:40px"><!-- wp:avatar {"size":40,"style":{"border":{"radius":"20px"}}} /--></div>
<!-- /wp:column -->
 
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:comment-author-name {"fontSize":"small"} /-->
 
<!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"flex"}} -->
<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px"><!-- wp:comment-date {"fontSize":"small"} /-->
 
<!-- wp:comment-edit-link {"fontSize":"small"} /--></div>
<!-- /wp:group -->
 
<!-- wp:comment-content /-->
 
<!-- wp:comment-reply-link {"fontSize":"small"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:comment-template -->
 
<!-- wp:comments-pagination -->
<!-- wp:comments-pagination-previous /-->
 
<!-- wp:comments-pagination-numbers /-->
 
<!-- wp:comments-pagination-next /-->
<!-- /wp:comments-pagination -->
 
<!-- wp:post-comments-form /--></div>
<!-- /wp:comments -->   
 
      """
    )
    update(input: {
      contentAs: { html: $__adaptedRawContent },
    }) {
      status
      errors {
        __typename
        ...on ErrorPayload {
          message
        }
      }
      post {
        id
        rawContent
      }
    }
  }
}

การเพิ่ม hook เพื่อรัน Persisted Query

Internal GraphQL Server จะใช้ Schema Configuration ที่กำหนดไว้ใน Settings ของตัวเองเป็นค่าเริ่มต้น

ดังนั้น เพื่อให้ GraphQL query นี้ทำงานได้ Schema Configuration ที่ใช้กับ Internal GraphQL Server จะต้องเปิดใช้งาน Nested Mutations

โค้ด PHP นี้ hook เข้ากับ action draft_post ของ WordPress เพื่อรัน Persisted Query (ผ่านส่วนขยาย Internal GraphQL Server):

use GatoGraphQL\InternalGraphQLServer\GraphQLServer;
use WP_Post;
 
add_action(
  'draft_post',
  function (int $postID): void {
    GraphQLServer::executePersistedQuery(
      'insert-mandatory-comments-block-if-missing',
      [
        'postId' => $postID,
      ],
      'MaybeInsertCommentsBlock'
    );
  }
);