在GraphQL上查询具有非结构化对象的数组

Question

我正在尝试使用GraphQL查询Gridsome中包含对象的非结构化数组。目前看起来非常混乱，感觉应该有更好的方法来做到这一点。

从CMS加载到GraphQL中的数据如下所示：

{
title: "Homepage",
top_image: "imgurl.jpg",
page_builder: [
{
type: "slider",
field: "data example",
different_field: "data example"
},
{
type: "call_to_action",
field_for_cta: "data example",
different_cta_field: "data example"
}
]
}

正如您所看到的，page_builder中的对象将具有不同的字段，这取决于客户端如何构建此部分。

当我尝试在GraphQL中查询它时。它将变得非常混乱：

<page-query>
query {
data: pages(path: "/pages") {
title,
top_image,
page_builder {
type,
field,
different_field,
type,
field_for_cta,
different_cta_field
#this list will have way more fields depending on all the page builder elements
}
}
}
</page-query>

有没有一种方法可以按类型组织这些字段，并且只返回该特定类型的字段？

Answer 1

假设网格组支持碎片，您可以执行以下操作：

<page-query>
query {
data: pages(path: "/pages") {
title,
top_image,
page_builder {
...A @include(if: $includeA)
...B @include(if: $includeB)
...C @include(if: $includeC)
}
}
}
# Note: Replace PageBuilderType with appropriate type
fragment A on PageBuilderType {
# your fields here
}
fragment B on PageBuilderType {
# your fields here
}
fragment C on PageBuilderType {
# your fields here
}
</page-query>

然后，您可以在调用createPage时定义变量，如下所示：

api.createPages(({ createPage }) => {
createPage({
path: '/my-page',
component: './src/templates/MyPage.vue',
queryVariables: {
includeA: someCondition,
includeB: someCondition,
includeC: someCondition,
},
})
})
}