Gatsby 和 GraphQL - 如何在查询中过滤数组答案

【问题标题】：Gatsby and GraphQL - How to Filter Array Within QueryGatsby 和 GraphQL - 如何在查询中过滤数组
【发布时间】：2018-04-14 08:50:42
【问题描述】：

我开始使用 Gatsby 和 GraphQL 来返回一个查询，其中列出了属于特定类别的所有画廊。在此示例中，该类别称为“生活方式”。这一切都成功了，我得到了一个包含该类别中所有画廊的数组。我还需要根据名为“日期”的子字段对该数组进行排序。这可以通过 GraphQL 查询本身来实现吗？我尝试将(sort: { fields: [date], order: DESC }) 添加到画廊字段，但没有奏效。

关于如何实现这一点的任何想法，或者这是否尽可能接近 GraphQL 可以让我满足我的需求？

提前感谢您的帮助。仍在尝试围绕 GraphQL。

瑞恩

Example of my current query

【问题讨论】：

标签： graphql contentful gatsby

【解决方案1】：

您能否提供有关您的内容模型的更多详细信息？

如果您在内容中使用“参考”字段，据我所知，目前无法使用该插件。
如果您使用“短文本，列表”字段，如默认示例中的标签。

使用默认示例，您可以执行以下查询：

    {
          allContentfulPost(filter:{tags:{eq:"fantasy"}}, sort:{fields:[date], order:DESC}) {
            edges {
              node {
                title {
                  childMarkdownRemark {
                    html
              }
            }
            slug
            date
          }
        }
      }
    }

它会给你以下结果：

    {
      "data": {
        "allContentfulPost": {
          "edges": [
            {
              "node": {
                "title": {
                  "childMarkdownRemark": {
                    "html": "<p>Disney Movie</p>"
                  }
                },
                "slug": "down-the-rabbit-hole",
                "date": "2017-11-26"
              }
            },
            {
              "node": {
                "title": {
                  "childMarkdownRemark": {
                    "html": "<p>Old book</p>"
                  }
                },
                "slug": "down-the-rabbit-hole-2",
                "date": "1865-11-26"
              }
            }
          ]
        }
      }
    }

【讨论】：

哇，好吧。是的，我当前的内容模型有两种类型：图库和类别。我使用 Gallery 内容类型中的参考字段将其与给定类别相关联。由于这个项目还处于早期阶段，我可以根据您的示例切换到使用常规文本字段并试一试。似乎引用字段将是“正确”的方法，但如果它是 gatsby-source-contentful 插件的限制，那很好。只要我以正确的顺序获得所需的数据，我就会很高兴。
意识到您可能已经解决了这个问题，但您也可以考虑在从 GraphQL 获取数据后在 javascript 中进行排序。它并不总是正确的方法，但在某些情况下可能有用。 Lodash / underscore 具有 _.sortBy() 功能，使其非常容易。

【解决方案2】：

我在尝试从我在 Contentful 中使用的类别标签中对帖子进行排序时遇到了同样的问题。正如@chmac 所说，您可以使用 Javascript 对 GraphQL 中的数据进行排序。

我不得不搜索一个很好的例子，但我终于在这个 Gatsby starter 中找到了一个：

Github：https://github.com/ryanwiemer/gatsby-starter-gcn/blob/master/src/templates/tag.js

实时示例：https://gcn.netlify.com/tag/fancy/

您可以在源文件中看到，他们使用moment (https://www.npmjs.com/package/moment) 和lodash 对名为posts 的新常量中的数据进行了排序。在我个人的例子中，我不得不像这样调整我的常量：

const courses = orderBy(
            this.props.data.contentfulCategory.course,
            // eslint-disable-next-line
            [object => new moment(object.createdAt)],
            ['desc']
          )

然后我只是在组件返回中使用了这样的映射函数：

{/* Courses */}
{courses.map(course => (
    <div className="hero__profile" key={course.id}>
        <h2>{course.title}</h2>
    </div>
))}

我希望这会有所帮助！

【讨论】：