Bài 10: Lấy dữ liệu có cấu trúc từ các khối

Chúng ta có thể duyệt qua các khối (Gutenberg) trong bài viết và trích xuất các thuộc tính từ sâu bên trong cấu trúc khối, giúp mở khóa các thuộc tính này để đưa vào bất kỳ chức năng nào trên trang web.

Chẳng hạn, bằng cách trích xuất tất cả URL hình ảnh có trong các khối core/image của một bài viết, chúng ta có thể tạo một băng chuyền hình ảnh với tất cả các hình ảnh đó.

Ngoài ra, vì các thuộc tính của khối giờ đây có thể truy cập rộng rãi (bên ngoài trình soạn thảo khối), chúng ta có thể thực sự coi chúng là nội dung có cấu trúc và phơi bày chúng qua API để phục vụ cho tất cả các ứng dụng của mình (chẳng hạn như ứng dụng di động hay bản tin).

Điều này cho phép chúng ta coi các khối là nguồn thông tin duy nhất cho toàn bộ nội dung và phân phối nội dung đó qua nhiều phương tiện và ứng dụng khác nhau theo chiến lược COPE ("Create Once, Publish Everywhere").

Bài hướng dẫn này trình bày cách lấy URL hình ảnh từ tất cả các khối core/image trong một bài viết.

​

Trích xuất URL hình ảnh từ tất cả các khối core/image trong một bài viết

Query GraphQL này sử dụng trường blockFlattenedDataItems để lấy tất cả các khối trong bài viết (bao gồm cả khối lồng nhau) trong khi lọc theo loại core/image. Sau đó nó duyệt qua tất cả các mục, trích xuất thuộc tính attributes.url từ mỗi mục và dùng nó để ghi đè giá trị trường. Cuối cùng, nó loại bỏ các URL trùng lặp (trong trường hợp hai khối core/image dùng cùng một hình ảnh) thông qua @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
  }
}Copy

Phản hồi là:

{
  "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"
      ]
    }
  }
}Copy

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

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