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

Надеюсь, это поможет!

Другие вопросы по тегам