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

【问题标题】：Using ACF with GraphQL and Gatsby, flexible content is not returning the order of it's child blocks将 ACF 与 GraphQL 和 Gatsby 一起使用，灵活的内容不会返回其子块的顺序
【发布时间】：2019-12-02 00:30:06
【问题描述】：

我有一个 Gatsby 网站，它连接到使用 Wordpress 作为无头 CMS。我正在使用 ACF 在 Wordpress 中创建动态布局，然后将我添加到页面的模块呈现到前端（Gatsby）。我正在使用 ACF 中的灵活内容功能在 cms 中动态创建可以在 React 中轻松呈现的布局。通常，我使用 next.js 和 Wordpress 的 REST 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: {....}
    }
  ]
}

【问题讨论】：

标签： javascript wordpress graphql advanced-custom-fields gatsby

【解决方案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
          }
        }
      }
    }
  }
}

【讨论】：