Gatsby и GraphQL - Как отфильтровать массив в запросе
Я начал использовать Gatsby вместе с GraphQL для возврата запроса, в котором перечислены все галереи, входящие в определенную категорию. В этом примере категория называется "Стиль жизни". Это все работает успешно, и я получаю массив со всеми галереями в категории. Мне также нужно отсортировать этот массив на основе подполя под названием "дата". Это возможно сделать через сам запрос GraphQL? Я пытался добавить (sort: { fields: [date], order: DESC })
в поле галереи, но это не сработало.
Любые мысли о том, как достичь этого или это так близко, как GraphQL может получить мне то, что мне нужно?
Заранее благодарю за любую помощь. Все еще пытаюсь обернуть мою голову вокруг GraphQL.
Райан
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"
}
}
]
}
}
}
Я столкнулся с той же проблемой, когда пытался отсортировать сообщения из тега категории, который я использовал в Contentful. Как сказал @chmac, вы можете сортировать данные из GraphQL с помощью Javascript.
Мне пришлось искать хороший пример, но я, наконец, нашел его в этом стартера Гэтсби:
Github: https://github.com/ryanwiemer/gatsby-starter-gcn/blob/master/src/templates/tag.js
Пример из жизни: https://gcn.netlify.com/tag/fancy/
Вы можете увидеть в исходном файле, что они отсортировали данные в новую константу под названием posts
с помощью 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']
)
Затем я просто использовал функцию карты, как в компоненте return:
{/* Courses */}
{courses.map(course => (
<div className="hero__profile" key={course.id}>
<h2>{course.title}</h2>
</div>
))}
Надеюсь, это поможет!