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对象（在迭代之前，按名称寻址）
循环播放（每页）：
- 在页面标签上循环（来自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作为道具传递。）

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

1 个答案: