在 Gatsby 中對多個查詢排序 GraphQL 查詢

Question

我使用 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
        }
      }
    }
  }

Answer 1

我不認為 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;

Answer 2

當然，您可以按多個字段排序。 只需將字段和排序順序作為數組傳遞給您的查詢：

query MyQuery {
    allContentfulPost(
        sort: { fields: [featured, updatedAt], order: [ASC, DESC] }) {
        edges {
            node {
               featured
               updatedAt(formatString: "d MM yyyy")
            }
        }
    }
}