Logo
Şema eğitimi
Şema eğitimiDers 10: Bloklardan yapılandırılmış veri alma

Ders 10: Bloklardan yapılandırılmış veri alma

Gönderi içindeki (Gutenberg) blokları iterasyon yapabilir ve blok yapısının derinlerindeki öznitelikleri çıkararak bu öznitelikleri sitemizin herhangi bir işlevine besleyebilmek için erişilebilir kılabiliriz.

Örneğin, bir gönderideki core/image bloklarında bulunan tüm resim URL'lerini çıkararak bu resimlerin tamamıyla bir resim karuseli oluşturabiliriz.

Bunun yanı sıra, blok öznitelikleri artık geniş çapta erişilebilir hale geldiğinden (blok editörünün dışında), bunları gerçek anlamda yapılandırılmış içerik olarak kabul edebilir ve tüm uygulamalarımızı (bir mobil uygulama veya bülten gibi) beslemek için bir API aracılığıyla sunabiliriz.

Bu sayede blokları tüm içeriğimiz için tek gerçek kaynak olarak kullanabilir ve COPE ("Create Once, Publish Everywhere") stratejisini izleyerek farklı ortamlara ve uygulamalara dağıtabiliriz.

Bu tutorial dersi, bir gönderideki tüm core/image bloklarından resim URL'lerinin nasıl alınacağını göstermektedir.

Bir gönderideki tüm core/image bloklarından resim URL'lerini çıkarma

Bu GraphQL query'si, gönderideki tüm blokları (iç bloklar dahil) core/image türüne göre filtreleyerek almak için blockFlattenedDataItems alanını kullanır. Ardından tüm girişleri iterasyon yapar, her birinden attributes.url özelliğini çıkarır ve bunu alan değerini geçersiz kılmak için kullanır. Son olarak, iki core/image bloğunun aynı resmi kullanması durumunda yinelenen URL'leri @arrayUnique ile kaldırır:

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
  }
}

Yanıt şu şekildedir:

{
  "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 uzantısı tarafından sağlanır), bir dizi öğe üzerinde iterasyon yapan ve iç içe direktifini her birine uygulayan birleştirilebilir bir direktiftir (ya da "meta direktif" — iç içe direktifler içerebilen bir direktif).

@underEachArrayItem, GraphQL türleri arasında köprü kurmaya yardımcı olur; zira [String] değeri döndüren bir alana, String değerini girdi olarak alan bir direktifin uygulanmasını sağlayabilir (veya başka kombinasyonlar).

Örneğin, aşağıdaki query'de:

  • User.capabilities alanı [String] döndürür
  • @strUpperCase direktifi String alır

@underEachArrayItem sayesinde tüm yetenek öğelerini büyük harfe dönüştürebiliriz:

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

...şu sonucu üretir:

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