บทเรียนที่ 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'
);
}
);