Question

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

关于如何实现这一点的任何想法，或者这与GraphQL一样接近，可以让我得到我需要的东西吗？

提前感谢您的帮助。仍然试图围绕GraphQL。

赖安

Example of my current query

Answer 1

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

如果您使用＆＃34;参考＆＃34;在内容丰富的情况下，据我所知，目前使用该插件是不可能的。
如果你使用＆＃34;短文，列表＆＃34;字段，与默认示例中的标记类似。

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

    {
          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/

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

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

然后我只是在组件return中使用了一个map函数：

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

我希望这会有所帮助！

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

2 个答案: