前端之家

  1. 首页
  2. 问答

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

• 问答

我正在尝试使用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>

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

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

假设gridsome支持片段，则可以执行以下操作：

<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时定义变量，如here所示：

api.createPages(({ createPage }) => {
    createPage({
      path: '/my-page',component: './src/templates/MyPage.vue',queryVariables: {
        includeA: someCondition,includeB: someCondition,includeC: someCondition,},})
  })
}
graphqlgridsome
本文链接：https://www.f2er.com/3158923.html

大家都在问