Logo
Tutorial skema
Tutorial skemaPelajaran 10: Mengambil data terstruktur dari blok

Pelajaran 10: Mengambil data terstruktur dari blok

Kita dapat mengiterasi blok (Gutenberg) dalam postingan dan mengekstrak atribut dari dalam struktur blok, membuka akses atribut tersebut agar dapat digunakan oleh fungsi apa pun di situs kita.

Misalnya, dengan mengekstrak semua URL gambar yang terdapat dalam blok core/image pada sebuah postingan, kita dapat membuat carousel gambar dari semua gambar tersebut.

Selain itu, karena atribut blok kini dapat diakses secara luas (di luar editor blok), kita benar-benar dapat menganggap atribut ini sebagai konten terstruktur, dan mengeksposnya melalui API untuk mendukung semua aplikasi kita (seperti aplikasi mobile atau newsletter).

Hal ini memungkinkan kita untuk memperlakukan blok sebagai sumber kebenaran tunggal untuk semua konten kita, dan mendistribusikannya ke berbagai media dan aplikasi dengan mengikuti strategi COPE ("Create Once, Publish Everywhere").

Pelajaran tutorial ini mendemonstrasikan cara mengambil URL gambar dari semua blok core/image dalam sebuah postingan.

Mengekstrak URL gambar dari semua blok core/image dalam sebuah postingan

GraphQL query ini menggunakan field blockFlattenedDataItems untuk mengambil semua blok dalam postingan (termasuk blok inner) sekaligus memfilternya berdasarkan tipe core/image. Kemudian mengiterasi semua entri, mengekstrak properti attributes.url dari masing-masing entri, dan menggunakannya untuk mengganti nilai field. Terakhir, menghapus URL duplikat (jika dua blok core/image menggunakan gambar yang sama) melalui @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
  }
}

Responsnya adalah:

{
  "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 (disediakan oleh ekstensi Field Value Iteration and Manipulation) adalah sebuah composable directive (atau "meta directive", yaitu directive yang dapat memuat directive bersarang) yang mengiterasi array elemen, dan menerapkan directive bersarangnya pada masing-masing elemen.

@underEachArrayItem membantu menjembatani tipe-tipe GraphQL, karena dapat membuat sebuah field yang mengembalikan nilai [String] agar dapat diterapkan directive yang menerima nilai String sebagai input (atau kombinasi lainnya).

Misalnya, dalam query di bawah ini:

  • Field User.capabilities mengembalikan [String]
  • Directive @strUpperCase menerima String

Berkat @underEachArrayItem, kita dapat mengkonversi semua item capabilities menjadi huruf kapital:

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

...menghasilkan:

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