Javascript 将ACF与GraphQL和Gatsby一起使用,flexible content不会返回它的顺序';s子块
我有一个盖茨比网站,连接起来使用Wordpress作为无头CMS。我使用ACF在Wordpress中创建动态布局,然后将我添加到页面的模块呈现到前端(Gatsby)。我正在使用ACF中的灵活内容功能在cms中动态创建布局,以便在React中轻松呈现。通常,我使用next.js和Wordpress的REST API来实现这一点,它将“灵活内容”数据作为对象数组返回,我可以轻松地迭代并呈现适当的内容 我的问题是,通过使用GraphQL和Gatsby,我从API获取的“灵活内容”数据只是父页面对象体中的一组对象。这意味着模块/子模块在灵活内容块中的放置顺序没有关系,因为它们不是数组的一部分。目前,我的解决方法是在子模块中添加一个额外字段,根据数值指定其在页面上的顺序……但这太糟糕了,对客户来说是一次可怕的经历,因此我对此不满意 是否有一种方法可以为AFC灵活内容块中的每个项目返回一个值,该内容块直接与其索引/位置相关。或者在使用Gatsby插件返回数据时,是否有方法返回数组中的子项 目前,我的查询有点像这样:Javascript 将ACF与GraphQL和Gatsby一起使用,flexible content不会返回它的顺序';s子块,javascript,wordpress,graphql,advanced-custom-fields,gatsby,Javascript,Wordpress,Graphql,Advanced Custom Fields,Gatsby,我有一个盖茨比网站,连接起来使用Wordpress作为无头CMS。我使用ACF在Wordpress中创建动态布局,然后将我添加到页面的模块呈现到前端(Gatsby)。我正在使用ACF中的灵活内容功能在cms中动态创建布局,以便在React中轻松呈现。通常,我使用next.js和Wordpress的REST API来实现这一点,它将“灵活内容”数据作为对象数组返回,我可以轻松地迭代并呈现适当的内容 我的问题是,通过使用GraphQL和Gatsby,我从API获取的“灵活内容”数据只是父页面对象体中
allWordpressPage {
edges {
node {
id
slug
status
template
title
childWordPressAcfFeaturedShowcaseCarousel {
id
title
other_stuff
}
childWordPressAcfIphonesAndContent {
id
title
other_stuff
}
childWordPressAcfContentAndImageSlideShow {
id
title
other_stuff
}
}
}
}
allWordpressPage {
edges {
node {
id
slug
status
template
title
acf {
modules_page {
... on WordPressAcf_featured_showcase_carousel {
__typename
id
title
other_stuff
}
... on WordPressAcf_iphones_and_content {
__typename
id
title
other_stuff
}
... on WordPressAcf_content_and_image_slide_show {
__typename
id
title
other_stuff
}
}
}
}
}
}
这将返回类似于:
{
id: 123,
slug: 'hello',
template: 'default',
title: 'Help Me',
childWordPressAcfFeaturedShowcaseCarousel: {
id: 1232
title: 'Bonjour'
other_stuff: {....}
},
childWordPressAcfIphonesAndContent: {
id: 1232
title: 'Bonjour'
other_stuff: {....}
},
childWordPressAcfContentAndImageSlideShow: {
id: 1232
title: 'Bonjour'
other_stuff: {....}
}
}
{
id: 123,
slug: 'hello',
template: 'default',
title: 'Help Me',
childWordPressAcfFeaturedShowcaseCarousel: {
id: 1232,
index: 1,
title: 'Bonjour',
other_stuff: {....}
},
childWordPressAcfIphonesAndContent: {
id: 1232,
index: 2,
title: 'Bonjour',
other_stuff: {....}
},
childWordPressAcfContentAndImageSlideShow: {
id: 1232,
index: 3,
title: 'Bonjour'
other_stuff: {....}
}
}
但我想要的是:
{
id: 123,
slug: 'hello',
template: 'default',
title: 'Help Me',
childWordPressAcfFeaturedShowcaseCarousel: {
id: 1232
title: 'Bonjour'
other_stuff: {....}
},
childWordPressAcfIphonesAndContent: {
id: 1232
title: 'Bonjour'
other_stuff: {....}
},
childWordPressAcfContentAndImageSlideShow: {
id: 1232
title: 'Bonjour'
other_stuff: {....}
}
}
{
id: 123,
slug: 'hello',
template: 'default',
title: 'Help Me',
childWordPressAcfFeaturedShowcaseCarousel: {
id: 1232,
index: 1,
title: 'Bonjour',
other_stuff: {....}
},
childWordPressAcfIphonesAndContent: {
id: 1232,
index: 2,
title: 'Bonjour',
other_stuff: {....}
},
childWordPressAcfContentAndImageSlideShow: {
id: 1232,
index: 3,
title: 'Bonjour'
other_stuff: {....}
}
}
或者更好:
{
id: 123,
slug: 'hello',
template: 'default',
title: 'Help Me',
module: [
childWordPressAcfFeaturedShowcaseCarousel: {
id: 1232,
title: 'Bonjour',
other_stuff: {....}
},
childWordPressAcfIphonesAndContent: {
id: 1232,
title: 'Bonjour',
other_stuff: {....}
},
childWordPressAcfContentAndImageSlideShow: {
id: 1232,
title: 'Bonjour'
other_stuff: {....}
}
]
}
所以我就想出来了。事实证明,在查询灵活内容块的数据时,有几件事需要记住。要访问灵活的内容字段,而不是使用字段名,您需要使用[field\u name]\u[post\u type](如果您的WordPress页面中有名为page\u builder的字段,则需要使用page\u builder\u page)。一旦你这样做了,所有的东西都会按照它们在ACF块中的确切顺序返回到一个数组中 现在我的查询如下所示:
allWordpressPage {
edges {
node {
id
slug
status
template
title
childWordPressAcfFeaturedShowcaseCarousel {
id
title
other_stuff
}
childWordPressAcfIphonesAndContent {
id
title
other_stuff
}
childWordPressAcfContentAndImageSlideShow {
id
title
other_stuff
}
}
}
}
allWordpressPage {
edges {
node {
id
slug
status
template
title
acf {
modules_page {
... on WordPressAcf_featured_showcase_carousel {
__typename
id
title
other_stuff
}
... on WordPressAcf_iphones_and_content {
__typename
id
title
other_stuff
}
... on WordPressAcf_content_and_image_slide_show {
__typename
id
title
other_stuff
}
}
}
}
}
}