Logo
Schema-tutorial
Schema-tutorialLes 10: Gestructureerde data ophalen uit blokken

Les 10: Gestructureerde data ophalen uit blokken

Je kunt de (Gutenberg) blokken in een bericht itereren en attributen extraheren vanuit de diepte van de blokstructuur, waardoor deze attributen beschikbaar worden voor elke functionaliteit op onze site.

Door bijvoorbeeld alle afbeeldings-URL's te extraheren uit de core/image-blokken in een bericht, kun je een afbeeldingscarousel maken met al deze afbeeldingen.

Bovendien, omdat de attributen van een blok nu breed toegankelijk zijn (buiten de blokeditor), kunnen we ze echt beschouwen als gestructureerde content en ze via een API beschikbaar stellen voor al onze applicaties (zoals een mobiele app of een nieuwsbrief).

Dit stelt ons in staat om blokken te behandelen als de enige bron van waarheid voor al onze content en deze te distribueren via verschillende media en apps volgens de COPE-strategie ("Create Once, Publish Everywhere").

Deze tutorial-les laat zien hoe je de afbeeldings-URL's ophaalt uit alle core/image-blokken in een bericht.

De afbeeldings-URL's extraheren uit alle core/image-blokken in een bericht

Deze GraphQL-query gebruikt het veld blockFlattenedDataItems om alle blokken in het bericht op te halen (inclusief innerlijke blokken) en ze te filteren op type core/image. Vervolgens itereert het alle vermeldingen, extraheert het de eigenschap attributes.url uit elk ervan en gebruikt het die om de veldwaarde te overschrijven. Tot slot verwijdert het dubbele URL's (voor het geval twee core/image-blokken dezelfde afbeelding gebruiken) via @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
  }
}

Het antwoord is:

{
  "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 (geleverd door de Field Value Iteration and Manipulation extensie) is een composeerbare directive (of "meta-directive", een directive die geneste directives kan bevatten) die itereert over een array van elementen en zijn geneste directive op elk ervan toepast.

@underEachArrayItem helpt GraphQL-typen te overbruggen, omdat het een veld dat een [String]-waarde retourneert, een directive kan laten ontvangen die een String-waarde als invoer verwacht (of andere combinaties).

In de onderstaande query bijvoorbeeld:

  • Veld User.capabilities retourneert [String]
  • Directive @strUpperCase ontvangt String

Dankzij @underEachArrayItem kunnen we alle capability-items naar hoofdletters omzetten:

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

...wat het volgende oplevert:

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