将ACF与GraphQL和Gatsby一起使用，灵活的内容不会返回其子块的顺序

Question

我有一个盖茨比网站，连接起来使用Wordpress作为无头CMS。我使用ACF在Wordpress中创建动态布局，然后将添加到页面的模块呈现到前端（盖茨比）。我正在使用ACF中的灵活内容功能在cms中动态创建布局，以便在React中轻松呈现。通常情况下，我会用next。js和Wordpress的REST API，它将“灵活内容”数据作为一个对象数组返回，我可以轻松迭代并呈现适当的内容。

我的问题是，使用GraphQL和Gatsby时，我从API中获得的“灵活内容”数据只是父页面对象体中的一堆对象。这意味着与模块/子模块在灵活内容块中的放置顺序无关，因为它们不是数组的一部分。目前我的解决方法是向子模块添加一个额外的字段，根据数字值指定其在页面上的顺序......但这很恶心，对于客户端来说将是一种可怕的体验，所以我对此不满意。

是否有一种方法可以为AFC灵活内容块中的每个项目返回直接与其索引/位置相关的值。或者，当使用盖茨比插件返回数据时，是否有方法返回数组中的子项。

目前，我的查询看起来有点像这样：

allWordpressPage {
  edges {
    node {
      id
      slug
      status
      template
      title
      childWordPressAcfFeaturedShowcaseCarousel {
        id
        title
        other_stuff
      }
      childWordPressAcfIphonesAndContent {
        id
        title
        other_stuff
      }
      childWordPressAcfContentAndImageSlideShow {
        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',
  module: [
    childWordPressAcfFeaturedShowcaseCarousel: {
      id: 1232,
      title: 'Bonjour',
      other_stuff: {....}
    },
    childWordPressAcfIphonesAndContent: {
      id: 1232,
      title: 'Bonjour',
      other_stuff: {....}
    },
    childWordPressAcfContentAndImageSlideShow: {
      id: 1232,
      title: 'Bonjour'
      other_stuff: {....}
    }
  ]
}

Answer 1

所以我刚刚想通了。事实证明，在查询灵活内容块的数据时，有几件事需要记住。要访问灵活内容字段，而不是使用它们的字段名，您需要使用[field_name]_[post_type]（如果您的WordPress页面中有名为page_builder的字段，则需要使用page_builder_page）。一旦您这样做，所有内容都将按照ACF块中的确切顺序返回数组。

所以现在我的查询看起来像这样:

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
          }
        }
      }
    }
  }
}