reactjs - GraphQL 中的嵌套排序

Question

我使用 Contentful 作为 CMS，其中我有内容模型“类别”和“子类别”。每个子类别都有一个类别作为其父类别。两种模型都有一个名为 order 的属性。我在 CMS 中设置它来决定它们在导航中出现的顺序。

这是我的 GraphQL 查询:

query {
  allContentfulCategory(sort: {fields: [order, subcategory___order]}) {
    edges {
      node {
        order
        title
        subcategory {
          order
          title
        }
      }
    }
  }
}

第一种排序工作正常，查询按顺序字段输出我的类别，而不是反向创建顺序，这似乎是 Contentful 的默认输出(最新的类别首先显示)。

然而，我的第二种 subcategory___order ，其灵感来自 this blog post ，不评价。换句话说，子类别(每个类别)以相反的顺序显示，因此顶部项目的顺序为 8，然后减少到 7 和 6，依此类推。

例如，假设我的类别“动物”的顺序为 2，“树”的顺序为 1。我的内容按反向创建顺序:“猫”(顺序 3)、“狗”(顺序 1)、“鸡”(订单 2)、“Birch”(订单 2)、“Oak”(订单 3)和“Willow”(订单 1)。

这些将通过查询得到，如下所示:

Trees (1):
  Birch (2)
  Oak (3)
  Willow (1)
Animals (2):
  Cat (3)
  Dog (1)
  Chicken (2)

我找不到让 GraphQL 查询同时执行两个排序命令的方法，以便根据我在 CMS 中设置的顺序对我的数据进行排序。

非常感谢!

编辑:这是一个组件解决方案:

在来自我的查询的每个类别节点中，我可以访问子类别及其在数组中的顺序。

const categories = data.allContentfulCategory.edges
    {categories.map((category) => {
        return (
            <div>
                {category.node.subcategory && category.node.subcategory.sort((a, b) => {return a.order - b.order}).map((subcategory) => {
                    return (
                        <div>
                            <p>{subcategory.title}</p>
                        </div>
                    )
                })}
            </div>
         )
      })}

这里的关键元素是我如何按组件内的子类别顺序对数组进行排序:
category.node.subcategory.sort((a, b) => {return a.order - b.order})
需要明确的是，这不是一个令人满意的解决方案，也没有回答我关于如何编写多个 GraphQL 排序的问题。但是这段代码在组织子类别方面确实做到了我想要的。

Answer 1

您正在查询 category而不是 subcategory :

query {
  allContentfulCategory(sort: {fields: [order, subcategory___order]}) {
    edges {
      node {
        order
        title
        subcategory {
          order
          title
        }
      }
    }
  }
}

在上面的查询中，只有返回的数组 data.allContentfulCategory.edges排序。 Gatsby 不会对嵌套在 category.subcategory 中的数据进行排序.

此外，您指定的第二个字段 ( subcategory___order ) 只有在第一个字段 ( order ) 相同时才会被考虑。由于每个类别都有唯一的顺序， subcategory永远不会被使用。

如果您可以查询类似 allContentfulSubcategory 的内容相反，它会起作用。

否则，您可以使用 createSchemaCustomization 将排序逻辑移至构建时间。 .我不知道你的架构是什么样的，所以这只是一个例子:

// gatsby-node.js
exports.createSchemaCustomization = ({ actions, schema }) => {
  const { createTypes } = actions
  const typeDefs = [
    schema.buildObjectType({
      name: "ContentfulCategory",
      fields: {
        subcategory: {
          type: "[ContentfulSubcategory]",
          resolve: (src) => {
            const subcategories = src.subcategory
            return subcategories.sort()
          }
        },
      },
      interfaces: ["Node"],
      extensions: { infer: true },
    }),
  ]
  createTypes(typeDefs)
}

如果您需要使用 createSchemaCustomization ，见 the Gatsby docs on the topic here .

文档的信息可能是压倒性的，我也是 wrote a bit about this API here .更多的是关于字段扩展，但解析器功能基本相同。