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

我试图在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 的组件中只显示当前页面的标签，但我认为这不是最好的方法。

在页面的迭代过程中（使用创建页面），你可以创建标签节点。

• 创建一个空的 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 作为道具传递）。)