Logo
Tutoriel du schéma
Tutoriel du schémaLeçon 10 : Récupérer des données structurées depuis les blocs

Leçon 10 : Récupérer des données structurées depuis les blocs

Nous pouvons itérer les blocs (Gutenberg) dans l'article et extraire les attributs depuis le fond de la structure des blocs, rendant ces attributs disponibles pour toute fonctionnalité de notre site.

Par exemple, en extrayant toutes les URLs d'images contenues dans les blocs core/image d'un article, nous pouvons créer un carrousel d'images avec toutes ces images.

De plus, comme les attributs du bloc deviennent désormais largement accessibles (en dehors de l'éditeur de blocs), nous pouvons véritablement les considérer comme du contenu structuré, et les exposer via une API pour alimenter toutes nos applications (comme une application mobile ou une newsletter).

Cela nous permet de traiter les blocs comme la source unique de vérité pour tout notre contenu, et de le distribuer à travers différents médias et applications en suivant la stratégie COPE ("Create Once, Publish Everywhere").

Cette leçon du tutoriel démontre comment récupérer les URLs d'images depuis tous les blocs core/image d'un article.

Extraire les URLs d'images de tous les blocs core/image d'un article

Cette requête GraphQL utilise le champ blockFlattenedDataItems pour récupérer tous les blocs de l'article (y compris les blocs internes) en les filtrant par le type core/image. Elle itère ensuite toutes les entrées, extrait la propriété attributes.url de chacune, et l'utilise pour remplacer la valeur du champ. Enfin, elle supprime les URLs en double (au cas où deux blocs core/image utilisent la même image) 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
  }
}

La réponse est :

{
  "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 (fourni par l'extension Field Value Iteration and Manipulation) est une directive composable (ou « méta-directive », c'est une directive qui peut contenir des directives imbriquées) qui itère sur un tableau d'éléments, et applique sa directive imbriquée sur chacun d'eux.

@underEachArrayItem aide à faire le pont entre les types GraphQL, car il peut permettre à un champ retournant une valeur [String] de se voir appliquer une directive qui reçoit une valeur String en entrée (ou d'autres combinaisons).

Par exemple, dans la requête ci-dessous :

  • Le champ User.capabilities retourne [String]
  • La directive @strUpperCase reçoit String

Grâce à @underEachArrayItem, nous pouvons convertir tous les éléments de capabilities en majuscules :

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

...produisant :

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