如何在 Gatsby 中显示即将发生的事件列表？答案

【问题标题】：How do I display a list of upcoming events in Gatsby?如何在 Gatsby 中显示即将发生的事件列表？
【发布时间】：2019-01-03 19:20:18
【问题描述】：

我有一组用于事件的降价文件，其中 frontmatter 字段“日期”设置为事件的日期。

我不知道如何使用 graphql 来查询具有未来日期的事件，限制为 3。如果无法使用 graphql 完成，那怎么办？

    {
      allMarkdownRemark(
        sort: {order: DESC, fields: [frontmatter___date]},
        filter: {frontmatter: {layout: {eq: "Event"}}},
        limit: 3) 
        {
          edges {
            node {
              id
              fields {
                slug
              }
              frontmatter {
                title
                layout
                date
              }
            }
          }
        }
    }

【问题讨论】：

标签： graphql gatsby

【解决方案1】：

您可以在 GraphQL 查询完所有帖子后进行过滤：

const Posts = edges
    .filter( edgeItem => edgeItem.node.frontmatter.date > Date.now())
    .map(({ node }) => <PostItem key={node.id} node={node} /> )

如果您的日期存储为字符串，请先将其转换以进行比较。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

【讨论】：