Logo
Samouczek schematu
Samouczek schematuLekcja 10: Pobieranie danych strukturalnych z bloków

Lekcja 10: Pobieranie danych strukturalnych z bloków

Możemy iterować bloki (Gutenberg) w poście i wyodrębniać atrybuty z głębi struktury bloków, udostępniając te atrybuty dowolnej funkcjonalności naszej witryny.

Na przykład, wyodrębniając wszystkie adresy URL obrazków zawarte w blokach core/image w poście, możemy utworzyć karuzelę obrazków ze wszystkimi tymi zdjęciami.

Ponadto, ponieważ atrybuty bloku stają się teraz powszechnie dostępne (poza edytorem bloków), możemy traktować je jako prawdziwie ustrukturyzowaną treść i udostępniać je przez API, aby zasilać wszystkie nasze aplikacje (takie jak aplikacja mobilna czy newsletter).

Pozwala nam to traktować bloki jako jedyne źródło prawdy dla całej naszej treści i dystrybuować ją za pośrednictwem różnych mediów i aplikacji zgodnie ze strategią COPE ("Create Once, Publish Everywhere").

Ta lekcja tutorialu demonstruje, jak pobrać adresy URL obrazków ze wszystkich bloków core/image w poście.

Wyodrębnianie adresów URL obrazków ze wszystkich bloków core/image w poście

Ta query GraphQL używa pola blockFlattenedDataItems, aby pobrać wszystkie bloki w poście (w tym bloki wewnętrzne), filtrując je według typu core/image. Następnie iteruje wszystkie wpisy, wyodrębnia właściwość attributes.url z każdego z nich i używa jej do nadpisania wartości pola. Na końcu usuwa zduplikowane adresy URL (na wypadek, gdy dwa bloki core/image używają tego samego obrazka) za pomocą @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
  }
}

Odpowiedź to:

{
  "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 (dostarczany przez rozszerzenie Field Value Iteration and Manipulation) jest dyrektywą kompozycyjną (lub „meta-dyrektywą", czyli dyrektywą, która może zawierać zagnieżdżone dyrektywy), która iteruje po tablicy elementów i stosuje swoją zagnieżdżoną dyrektywę do każdego z nich.

@underEachArrayItem pomaga łączyć typy GraphQL, ponieważ może sprawić, że pole zwracające wartość [String] będzie mogło przyjąć dyrektywę, która oczekuje wartości String jako wejścia (lub inne kombinacje).

Na przykład w poniższej query:

  • Pole User.capabilities zwraca [String]
  • Dyrektywa @strUpperCase przyjmuje String

Dzięki @underEachArrayItem możemy przekonwertować wszystkie elementy capabilities na wielkie litery:

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

...dając wynik:

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