在 GraphQL 查询中分组后如何限制和跳过标签列表页面的分页？答案

【问题标题】：How to limit and skip after grouping in a GraphQL query to paginate the tags list page?在 GraphQL 查询中分组后如何限制和跳过标签列表页面的分页？
【发布时间】：2020-09-06 22:05:49
【问题描述】：

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

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

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

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

但这不适用于标签列表页面的分页，这将在allMdx 上转到limit 和skip，因此我们将在多个页面上获得相同的标签以及@987654329 @ 不是标签的帖子总数，而是 limited 帖子的总数。

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

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

【问题讨论】：

阅读“gatsby 创建节点”...在页面创建（循环）期间，您可以收集标签（创建节点）...然后创建标签页面
@xadm 谢谢你，我已经按照你的建议，现在我在context中传递每个页面的标签，我以前只传递页码和总数，但我仍然想知道如何使用 GraphQL 查询来做同样的事情。
.... 创建 [tag] 节点 ... 每个页面的标签都应该由 frontmatter 提供，无需单独传递
@xadm 你在谈论帖子标签吗？我说的是一个/tags 页面，其中列出了所有标签和每个标签的帖子数，这是我要分页的页面。

标签： javascript graphql gatsby

【解决方案1】：

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

创建一个空的tags 对象（在迭代之前，按名称寻址），
在循环中（对于每一页）：
- 循环页面标签（来自frontmater tags）：
  - 使用posts 数组属性创建tags[tag_name] 对象（如果不存在）；
  - 将当前页面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 作为道具传递） .

【讨论】：