javascript - 在 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不会是标签的帖子总数，而是 limit 的总数编辑帖子。

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对象(迭代前，按名称寻址)，

在循环中(对于每一页):

循环页面标签(来自frontmate 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页。您可以查询节点集合。

您应该能够(在游乐场测试)为标签索引页面分页，您可以显示标签名称、页面数量甚至页面链接(扩展数量组件 View ？ posts 和 post_count 作为 Prop 传递)。