4

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

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

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

瑞安

我当前查询的示例

4

2 回答 2

3

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

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

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

    {
          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"
              }
            }
          ]
        }
      }
    }
于 2017-11-02T00:45:29.817 回答
1

当我试图从我在 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/

您可以在源文件中看到他们在一个名为postsusing moment( https://www.npmjs.com/package/moment ) 和lodash. 在我个人的例子中，我不得不像这样调整我的常量：

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

我希望这有帮助！

于 2019-01-07T03:58:43.710 回答