Logo
Tutorial do schema
Tutorial do schemaLição 10: Recuperando dados estruturados de blocos

Lição 10: Recuperando dados estruturados de blocos

Podemos iterar os blocos (Gutenberg) no post e extrair os atributos de dentro da estrutura dos blocos, disponibilizando esses atributos para qualquer funcionalidade do nosso site.

Por exemplo, ao extrair todos os URLs de imagens contidos nos blocos core/image de um post, podemos criar um carrossel de imagens com todas essas imagens.

Além disso, como os atributos do bloco agora se tornam amplamente acessíveis (fora do editor de blocos), podemos considerá-los verdadeiramente como conteúdo estruturado, e expô-los via uma API para alimentar todas as nossas aplicações (como um aplicativo mobile ou uma newsletter).

Isso nos permite tratar os blocos como a única fonte de verdade para todo o nosso conteúdo, e distribuí-lo por diferentes meios e aplicações seguindo a estratégia COPE ("Create Once, Publish Everywhere").

Esta lição do tutorial demonstra como recuperar os URLs de imagens de todos os blocos core/image em um post.

Extraindo os URLs de imagens de todos os blocos core/image em um post

Esta query GraphQL usa o campo blockFlattenedDataItems para buscar todos os blocos do post (incluindo blocos internos) filtrando-os pelo tipo core/image. Em seguida, itera todas as entradas, extrai a propriedade attributes.url de cada uma e a usa para substituir o valor do campo. Por fim, remove URLs duplicados (caso dois blocos core/image usem a mesma imagem) 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
  }
}

A resposta é:

{
  "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 (fornecido pela extensão Field Value Iteration and Manipulation) é uma diretiva componível (ou "meta-diretiva", isto é, uma diretiva que pode conter diretivas aninhadas) que itera sobre um array de elementos e aplica sua diretiva aninhada em cada um deles.

@underEachArrayItem ajuda a fazer a ponte entre os tipos GraphQL, pois pode permitir que um campo que retorna um valor [String] receba uma diretiva que aceita um valor String como entrada (ou outras combinações).

Por exemplo, na query abaixo:

  • O campo User.capabilities retorna [String]
  • A diretiva @strUpperCase recebe String

Graças ao @underEachArrayItem, podemos converter todos os itens de capabilities para maiúsculas:

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

...produzindo:

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