在 GraphQL 查询中分组后如何限制和跳过以对标签列表页面进行分页？

Question

我正在尝试对 Gatsby 站点中的博客标签列表页面进行分页，标签是在 MDX 文件的前端定义的：

---
title: Blog Post Title
date: 2020-05-20
tags: ["Markdown", "Gatsby", "JavaScript"]
---

对帖子进行分页很容易使用limit并skip在页面context对象中传递：

query Posts($limit: Int!, $skip: Int!) {
  allMdx(
    sort: { fields: frontmatter___date, order: DESC }
    limit: $limit
    skip: $skip
  ) {
    nodes {
      ...
  }
}

但是，这并不适用于分页标签列表页，这是要limit和skip上allMdx，所以我们会得到多个页面上相同的标记，也totalCount不会成为一个标签，但总的总帖对于limited 帖子。

query Tags($limit: Int!, $skip: Int!) {
  allMdx(limit: $limit, skip: $skip) {
    group(field: frontmatter___tags) {
      fieldValue
      totalCount
    }
  }
}

所以，我怎么可以申请limit并skip在group与不上的帖子？我能做的是获取每个页面的所有标签并使用limit和skip在组件中仅显示当前页面的标签，但我认为这不是最好的方法。

Answer 1

在页面迭代期间（使用创建页面），您可以创建标签节点。

• 创建一个空tags对象（在迭代之前，用于按名称寻址），
• 循环中（对于每个页面）：
  • 循环页面标签（来自 frontmater tags）：
    • 使用数组属性创建tags[tag_name]对象（如果不存在） ；posts
    • 将当前页面slug插入tags[tag_name].posts

最后（创建页面循环之后），您将在如下结构中收集数据：

tags={
  "tag_1" : {
    posts [
      "slug_1",
      "slug_2"
    ]
  },
  "tag_2" : {
    posts [
      "slug_2",
      "slug_3",
      "slug_4"
    ]
  }
}

通过迭代此对象，您可以使用 {tag_name, posts, post_count} 创建标签节点。

之后您可以创建/tags页面。您可以查询节点集合。

您应该能够（在操场上测试）对标签索引页面进行分页，您可以显示标签名称、页面数量甚至页面链接（展开数量组件视图？posts并post_count作为道具传递）。