时间戳

首页 > 解决方案 > 在 Gatsby 中对多个查询的 GraphQL 查询进行排序

graphql - 在 Gatsby 中对多个查询的 GraphQL 查询进行排序

问题描述

我使用 Gatsby 作为我的静态生成器，使用 Contentful 作为我的数据源。

我们在 Contentful 中有多个 contentType（博客、事件、白皮书），我想在一个查询中返回这些内容并按 createdAt 日期排序。到目前为止，我有以下内容，它按每个 contentType 的顺序返回每个 contentType，但不按日期顺序返回。

有没有办法可以对整个查询进行排序？

{
    whitepapers: allContentfulWhitepaper(sort: { order: DESC, fields: createdAt }) {
      edges {
        node {
          id
          slug
          title
        }
      }
    }
    blogs: allContentfulBlogPost(sort: { order: DESC, fields: createdAt }) {
      edges {
        node {
          id
          slug
          title
        }
      }
    }
    events: allContentfulEventPage(sort: { order: DESC, fields: createdAt }) {
      edges {
        node {
          id
          slug
          title
        }
      }
    }
  }

标签： graphqlgatsbycontentful

解决方案

我不认为 GraphQL 查询能够跨多个字段进行排序，但您可以在组件中排序

import React from 'react';
import { graphql } from 'gatsby';

const IndexPage = ({ data }) => {
  const { whitepapers, blogs, events } = data;
  const allDataInDesc = [
    ...whitepagers.edges.map(e => e.node),
    ...blogs.edges.map(e => e.node),
    ...events.edges.map(e => e.node),
  ].sort((a, b) => { return new Date(a.createdAt) > new Date(b.createdAt) ? -1 : 1; });

  return <>...</>
}

export const query = graphql`
  {
    whitepapers: allContentfulWhitepaper(sort: { order: DESC, fields: createdAt }) {
      edges {
        node {
          id
          slug
          title
          createdAt
        }
      }
    }
    blogs: allContentfulBlogPost(sort: { order: DESC, fields: createdAt }) {
      edges {
        node {
          id
          slug
          title
          createdAt
        }
      }
    }
    events: allContentfulEventPage(sort: { order: DESC, fields: createdAt }) {
      edges {
        node {
          id
          slug
          title
          createdAt
        }
      }
    }
  }
`;

export default IndexPage;

推荐阅读