Logo
Schema-Tutorial
Schema-TutorialLektion 10: Strukturierte Daten aus Blöcken abrufen

Lektion 10: Strukturierte Daten aus Blöcken abrufen

Wir können die (Gutenberg-)Blöcke in einem Beitrag iterieren und Attribute aus tief innerhalb der Blockstruktur extrahieren, sodass diese Attribute für beliebige Funktionen auf unserer Website verfügbar werden.

Indem wir zum Beispiel alle Bild-URLs aus den core/image-Blöcken eines Beitrags extrahieren, können wir ein Bild-Karussell mit all diesen Bildern erstellen.

Da die Attribute des Blocks nun weitgehend zugänglich sind (außerhalb des Block-Editors), können wir sie wirklich als strukturierte Inhalte betrachten und über eine API bereitstellen, um all unsere Anwendungen damit zu versorgen (z. B. eine mobile App oder einen Newsletter).

Das ermöglicht es uns, Blöcke als einzige Quelle der Wahrheit für alle unsere Inhalte zu behandeln und sie über verschiedene Medien und Apps hinweg nach der COPE-Strategie ("Create Once, Publish Everywhere") zu verteilen.

Diese Tutorial-Lektion zeigt, wie man die Bild-URLs aus allen core/image-Blöcken eines Beitrags abruft.

Die Bild-URLs aus allen core/image-Blöcken eines Beitrags extrahieren

Diese GraphQL-Query verwendet das Feld blockFlattenedDataItems, um alle Blöcke des Beitrags (einschließlich innerer Blöcke) abzurufen und nach dem Typ core/image zu filtern. Anschließend werden alle Einträge iteriert, die Eigenschaft attributes.url aus jedem Eintrag extrahiert und zum Überschreiben des Feldwerts verwendet. Zum Schluss werden doppelte URLs (falls zwei core/image-Blöcke dasselbe Bild verwenden) via @arrayUnique entfernt:

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

Die Antwort lautet:

{
  "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 (bereitgestellt durch die Field Value Iteration and Manipulation-Erweiterung) ist eine komponierbare Direktive (auch „Meta-Direktive" genannt – eine Direktive, die verschachtelte Direktiven enthalten kann), die über ein Array von Elementen iteriert und ihre verschachtelte Direktive auf jedes davon anwendet.

@underEachArrayItem hilft dabei, GraphQL-Typen zu überbrücken: Es kann ein Feld, das einen [String]-Wert zurückgibt, mit einer Direktive verbinden, die einen String-Wert als Eingabe erwartet (oder andere Kombinationen).

Zum Beispiel in der folgenden Query:

  • Das Feld User.capabilities gibt [String] zurück
  • Die Direktive @strUpperCase empfängt String

Dank @underEachArrayItem können wir alle Capability-Einträge in Großbuchstaben umwandeln:

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

...was folgendes ergibt:

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