บทที่ 10: การดึงข้อมูลที่มีโครงสร้างจากบล็อก

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

ตัวอย่างเช่น การดึง URL ของรูปภาพทั้งหมดที่อยู่ในบล็อก core/image ในโพสต์ ทำให้เราสามารถสร้างคารูเซลรูปภาพที่ประกอบด้วยรูปภาพทั้งหมดเหล่านี้ได้

นอกจากนี้ เมื่อแอตทริบิวต์ของบล็อกสามารถเข้าถึงได้อย่างกว้างขวาง (นอกเหนือจากตัวแก้ไขบล็อก) เราจึงสามารถถือว่าสิ่งเหล่านี้เป็นเนื้อหาที่มีโครงสร้างได้อย่างแท้จริง และเปิดเผยผ่าน API เพื่อขับเคลื่อนแอปพลิเคชันทั้งหมดของเรา (เช่น แอปมือถือหรือจดหมายข่าว)

สิ่งนี้ทำให้เราสามารถถือว่าบล็อกเป็นแหล่งข้อมูลที่เชื่อถือได้เพียงแหล่งเดียวสำหรับเนื้อหาทั้งหมดของเรา และเผยแพร่ไปยังสื่อและแอปต่าง ๆ ตามกลยุทธ์ COPE (“Create Once, Publish Everywhere”)

บทเรียนนี้จะสาธิตวิธีการดึง URL ของรูปภาพจากบล็อก core/image ทั้งหมดในโพสต์

การดึง URL ของรูปภาพจากบล็อก `core/image` ทั้งหมดในโพสต์

GraphQL query นี้ใช้ฟิลด์ blockFlattenedDataItems เพื่อดึงบล็อกทั้งหมดในโพสต์ (รวมถึงบล็อกภายใน) พร้อมกับกรองด้วยประเภท core/image จากนั้นจะวนซ้ำทุกรายการ ดึงพร็อพเพอร์ตี้ attributes.url จากแต่ละรายการ และใช้ค่านั้นเพื่อแทนที่ค่าของฟิลด์ สุดท้ายจะลบ URL ที่ซ้ำกัน (ในกรณีที่บล็อก core/image สองบล็อกใช้รูปภาพเดียวกัน) ด้วย @arrayUnique:

query GetImageBlockImageURLs($postID: ID!) {
  post(by: { id: $postID } ) {
    coreImageURLs: blockFlattenedDataItems(
      filterBy: { include: "core/image" }
    )
      @underEachArrayItem(
        passValueOnwardsAs: "blockDataItem"
      )
        @applyField(
          name: "_objectProperty"
          arguments: {
            object: $blockDataItem,
            by: {
              path: "attributes.url"
            }
          }
          setResultInResponse: true
        )
      @arrayUnique
  }
}

ผลลัพธ์ที่ได้คือ:

{
  "data": {
    "post": {
      "coreImageURLs": [
        "https://d.pr/i/fW6V3V+",
        "https://gatographql.lndo.site/wp-content/uploads/2022/05/GatoGraphQL-logo-1024x622.jpg",
        "https://gatographql.lndo.site/wp-content/uploads/2022/05/GatoGraphQL-logo-suki-1024x598.webp"
      ]
    }
  }
}

@underEachArrayItem (จัดเตรียมโดยเอกซ์เทนชัน Field Value Iteration and Manipulation) เป็นคอมโพสเซเบิลไดเรกทีฟ (หรือ "เมตาไดเรกทีฟ" ซึ่งเป็นไดเรกทีฟที่สามารถมีไดเรกทีฟซ้อนอยู่ภายในได้) ที่วนซ้ำผ่านอาร์เรย์ขององค์ประกอบ และนำไดเรกทีฟที่ซ้อนอยู่ไปใช้กับแต่ละองค์ประกอบ

@underEachArrayItem ช่วยเชื่อมต่อประเภทข้อมูลของ GraphQL เนื่องจากสามารถทำให้ฟิลด์ที่คืนค่า [String] ถูกนำไปใช้กับไดเรกทีฟที่รับค่า String เป็นอินพุตได้ (หรือชุดผสมอื่น ๆ)

ตัวอย่างเช่น ใน query ด้านล่างนี้:

ฟิลด์ User.capabilities คืนค่า [String]
ไดเรกทีฟ @strUpperCase รับค่า String

ด้วย @underEachArrayItem เราจึงสามารถแปลงรายการ capability ทั้งหมดให้เป็นตัวพิมพ์ใหญ่ได้:

{
  user(by: { id: 3 }) {
    capabilities
      @underEachArrayItem
        @strUpperCase
  }
}

...ซึ่งให้ผลลัพธ์:

{
  "data": {
    "user": {
      "capabilities": [
        "LEVEL_0",
        "READ",
        "READ_PRIVATE_EVENTS",
        "READ_PRIVATE_LOCATIONS"
      ]
    }
  }
}

​การดึง URL ของรูปภาพจากบล็อก core/image ทั้งหมดในโพสต์

การดึง URL ของรูปภาพจากบล็อก `core/image` ทั้งหมดในโพสต์