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

Question

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

我的问题是，使用 GraphQL 和 Gatsby，我从 API 取回的 "flexible content" 数据只是父页面对象主体中的一堆对象。这意味着 modules/children 在灵活内容块中的放置顺序没有关系，因为它们不是数组的一部分。目前，我的解决方法是向子模块添加一个额外的字段，根据数值指定其在页面上的顺序......但这很粗鲁，对客户来说是一种可怕的体验，所以我对此不满意。

有没有办法为 AFC 灵活内容块中的每个项目 return 一个直接与其 index/position 相关的值。或者在使用 Gatsby 插件 returning 数据时，有没有办法 return 数组中的子项。

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

allWordpressPage {
  edges {
    node {
      id
      slug
      status
      template
      title
      childWordPressAcfFeaturedShowcaseCarousel {
        id
        title
        other_stuff
      }
      childWordPressAcfIphonesAndContent {
        id
        title
        other_stuff
      }
      childWordPressAcfContentAndImageSlideShow {
        id
        title
        other_stuff
      }
    }
  }
}

这将 return 类似于：

{
  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）。一旦你这样做了，所有的东西都会return按照它们在 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
          }
        }
      }
    }
  }
}

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

Using ACF with GraphQL and Gatsby, flexible content is not returning the order of it's child blocks

javascript

wordpress

advanced-custom-fields

graphql

gatsby