Logo
Tutorial del esquema
Tutorial del esquemaLección 10: Recuperando datos estructurados desde bloques

Lección 10: Recuperando datos estructurados desde bloques

Podemos iterar los bloques (Gutenberg) en la entrada y extraer los atributos desde el interior de la estructura del bloque, desbloqueando estos atributos para poder pasarlos a cualquier funcionalidad de nuestro sitio.

Por ejemplo, extrayendo todas las URLs de imagen contenidas en los bloques core/image en una entrada, podemos crear un carrusel de imágenes con todas estas imágenes.

Además, como los atributos del bloque ahora se vuelven ampliamente accesibles (fuera del editor de bloques), podemos verdaderamente considerar éstos como contenido estructurado, y exponerlos mediante una API para alimentar todas nuestras aplicaciones (como una app móvil o un boletín).

Esto nos permite tratar los bloques como la única fuente de verdad para todo nuestro contenido, y distribuirlo a través de diferentes medios y apps siguiendo la estrategia COPE (“Create Once, Publish Everywhere”).

Esta lección del tutorial demuestra cómo recuperar las URLs de imagen desde todos los bloques core/image en una entrada.

Extrayendo las URLs de imagen de todos los bloques core/image en una entrada

Esta consulta GraphQL usa el campo blockFlattenedDataItems para obtener todos los bloques en la entrada (incluyendo bloques internos) filtrándolos por el tipo core/image. Luego itera todas las entradas, extrae la propiedad attributes.url de cada una, y la usa para sobrescribir el valor del campo. Finalmente elimina URLs duplicadas (por si dos bloques core/image usan la misma imagen) mediante @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 respuesta es:

{
  "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 (proporcionada por la extensión Iteración y Manipulación del Valor de Campos) es una directiva componible (o "meta-directiva", es una directiva que puede contener directivas anidadas) que itera sobre un array de elementos, y aplica su directiva anidada sobre cada uno de ellos.

@underEachArrayItem ayuda a hacer de puente entre tipos GraphQL, ya que puede hacer que un campo que devuelve un valor [String], se le aplique una directiva que recibe un valor String como entrada (u otras combinaciones).

Por ejemplo, en la consulta de abajo:

  • El campo User.capabilities devuelve [String]
  • La directiva @strUpperCase recibe String

Gracias a @underEachArrayItem, podemos convertir todos los elementos de capabilities a mayúsculas:

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

...produciendo:

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