javascript - 通过将ACF与GraphQL和Gatsby结合使用，灵活的内容不会返回其子块的顺序

我有一个Gatsby网站，可以将Wordpress用作无头CMS。我正在使用ACF在Wordpress中创建动态布局，然后将添加到页面的模块呈现到前端（Gatsby）。我正在使用ACF中的灵活内容功能在cms中动态创建可以在React中轻松呈现的布局。通常，我使用next.js和Wordpress的REST API来执行此操作，该API将“灵活内容”数据作为对象数组返回，我可以轻松地对其进行迭代并呈现适当的内容。

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

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

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

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: {....}
    }
  ]
}

最佳答案

所以我想通了。事实证明，在查询数据以获取灵活的内容块时，需要记住一些事情。要访问灵活的内容字段，请使用[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
          }
        }
      }
    }
  }
}