Logo
Tutorial dello schema
Tutorial dello schemaLezione 10: Recuperare dati strutturati dai blocchi

Lezione 10: Recuperare dati strutturati dai blocchi

Possiamo iterare i blocchi (Gutenberg) nel post ed estrarre gli attributi dall'interno della struttura dei blocchi, rendendo questi attributi disponibili a qualsiasi funzionalità del nostro sito.

Ad esempio, estraendo tutti gli URL delle immagini contenuti nei blocchi core/image di un post, possiamo creare un carosello di immagini con tutte queste immagini.

Inoltre, poiché gli attributi del blocco diventano ora ampiamente accessibili (al di fuori dell'editor di blocchi), possiamo considerarli a tutti gli effetti come contenuto strutturato, ed esporli tramite un'API per alimentare tutte le nostre applicazioni (come un'app mobile o una newsletter).

Questo ci permette di trattare i blocchi come unica fonte di verità per tutti i nostri contenuti, e di distribuirli attraverso diversi media e applicazioni seguendo la strategia COPE ("Create Once, Publish Everywhere").

Questa lezione del tutorial mostra come recuperare gli URL delle immagini da tutti i blocchi core/image di un post.

Estrarre gli URL delle immagini da tutti i blocchi core/image di un post

Questa query GraphQL usa il campo blockFlattenedDataItems per recuperare tutti i blocchi del post (inclusi i blocchi interni) filtrandoli per tipo core/image. Itera poi tutte le voci, estrae la proprietà attributes.url da ciascuna e la usa per sovrascrivere il valore del campo. Infine rimuove gli URL duplicati (nel caso in cui due blocchi core/image usino la stessa immagine) tramite @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
  }
}

La risposta è:

{
  "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 (fornito dall'estensione Field Value Iteration and Manipulation) è una direttiva componibile (o "meta-direttiva", ovvero una direttiva che può contenere direttive annidate) che itera su un array di elementi e applica la sua direttiva annidata su ciascuno di essi.

@underEachArrayItem aiuta a fare da ponte tra i tipi GraphQL, poiché può permettere a un campo che restituisce un valore [String] di ricevere una direttiva che accetta un valore String come input (o altre combinazioni).

Ad esempio, nella query qui sotto:

  • Il campo User.capabilities restituisce [String]
  • La direttiva @strUpperCase riceve String

Grazie a @underEachArrayItem, possiamo convertire tutti gli elementi di capabilities in maiuscolo:

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

...producendo:

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