레슨 10: 블록에서 구조화된 데이터 가져오기
게시물 내의 (Gutenberg) 블록을 순회하고 블록 구조 깊은 곳에서 속성을 추출함으로써, 이러한 속성을 사이트의 모든 기능에 활용할 수 있게 됩니다.
예를 들어, 게시물 내의 모든 core/image 블록에 포함된 이미지 URL을 추출하면, 해당 이미지들로 이미지 캐러셀을 만들 수 있습니다.
또한, 블록의 속성이 블록 편집기 외부에서도 광범위하게 접근 가능해짐으로써, 이를 진정한 구조화된 콘텐츠로 취급하고 API를 통해 공개하여 모바일 앱이나 뉴스레터 등 모든 애플리케이션에서 활용할 수 있습니다.
이를 통해 블록을 모든 콘텐츠의 단일 정보 출처로 취급하고, COPE("Create Once, Publish Everywhere") 전략에 따라 다양한 미디어와 앱에 콘텐츠를 배포할 수 있습니다.
이 튜토리얼 레슨에서는 게시물 내의 모든 core/image 블록에서 이미지 URL을 가져오는 방법을 보여 드립니다.
게시물 내의 모든 core/image 블록에서 이미지 URL 추출하기
이 GraphQL 쿼리는 blockFlattenedDataItems 필드를 사용하여 게시물 내의 모든 블록(내부 블록 포함)을 가져오면서 core/image 유형으로 필터링합니다. 그런 다음 모든 항목을 순회하고, 각 항목에서 attributes.url 속성을 추출하여 필드 값을 덮어씁니다. 마지막으로 @arrayUnique를 통해 중복 URL(두 개의 core/image 블록이 동일한 이미지를 사용하는 경우)을 제거합니다:
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
}
}응답은 다음과 같습니다:
{
"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(Field Value Iteration and Manipulation 익스텐션 제공)은 컴포저블 디렉티브(또는 "메타 디렉티브"로, 중첩된 디렉티브를 포함할 수 있는 디렉티브)이며, 요소 배열을 순회하면서 각 요소에 중첩된 디렉티브를 적용합니다.
@underEachArrayItem는 GraphQL 타입 간의 가교 역할을 합니다. [String] 값을 반환하는 필드에 String 값을 입력으로 받는 디렉티브를 적용하는 것(또는 다른 조합)이 가능해집니다.
예를 들어, 아래 쿼리에서:
- 필드
User.capabilities는[String]을 반환합니다 - 디렉티브
@strUpperCase는String을 받습니다
@underEachArrayItem 덕분에 모든 capability 항목을 대문자로 변환할 수 있습니다:
{
user(by: { id: 3 }) {
capabilities
@underEachArrayItem
@strUpperCase
}
}...결과는 다음과 같습니다:
{
"data": {
"user": {
"capabilities": [
"LEVEL_0",
"READ",
"READ_PRIVATE_EVENTS",
"READ_PRIVATE_LOCATIONS"
]
}
}
}