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

Question

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

关于如何实现这一目标的任何想法，或者这是否与 GraphQL 一样接近我可以满足我的需求？

提前感谢任何帮助。仍然试图将我的头缠绕在 GraphQL 上。

莱恩

我当前查询的示例

Answer 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"
              }
            }
          ]
        }
      }
    }

Answer 2

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

我不得不寻找一个很好的例子，但我终于在这个盖茨比的入门中找到了一个：

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

我希望这有帮助！