使用 gatsby-plugin-categories / gatsby-plugin-tags 标记云和类别列表答案

【问题标题】：Tag cloud and Category list with gatsby-plugin-categories / gatsby-plugin-tags使用 gatsby-plugin-categories / gatsby-plugin-tags 标记云和类别列表
【发布时间】：2020-12-18 07:22:03
【问题描述】：

我想创建一个标签云（或类别列表），它应该链接到相应的标记文章和类别。但是在我构建的查询中，我只将name OR slug 连接起来，因为它们要么放在fields 要么放在frontmatter 中，而不是放在一个对象中

我使用这两个广泛使用的插件：https://github.com/rmcfadzean/gatsby-pantry

这是我当前的查询：

{
  tags: allMarkdownRemark(filter: {frontmatter: {title: {ne: ""}}}) {
    group(field: frontmatter___tags) {
      fieldValue
      totalCount
      edges {
        node {
          fields {
            tags
          }
          frontmatter {
            tags
          }
        }
      }
    }
  }
}

{
  "data": {
    "allMarkdownRemark": {
      "group": [
        {
          "fieldValue": "Another tag",
          "totalCount": 1,
          "edges": [
            {
              "node": {
                "fields": {
                  "tags": [
                    "another-tag",
                    "my-example",
                    "post"
                  ]
                },
                "frontmatter": {
                  "tags": [
                    "Another tag",
                    "My example",
                    "Post"
                  ]
                }
              }
            }
          ]
        },
        {
          "fieldValue": "Example",
          "totalCount": 1,
          "edges": [
            {
              "node": {
                "fields": {
                  "tags": [
                    "example",
                    "post"
                  ]
                },
                "frontmatter": {
                  "tags": [
                    "Example",
                    "Post"
                  ]
                }
              }
            }
          ]
        },
        {
          "fieldValue": "My example",
          "totalCount": 1,
          "edges": [
            {
              "node": {
                "fields": {
                  "tags": [
                    "another-tag",
                    "my-example",
                    "post"
                  ]
                },
                "frontmatter": {
                  "tags": [
                    "Another tag",
                    "My example",
                    "Post"
                  ]
                }
              }
            }
          ]
        },
        {
          "fieldValue": "Post",
          "totalCount": 2,
          "edges": [
            {
              "node": {
                "fields": {
                  "tags": [
                    "another-tag",
                    "my-example",
                    "post"
                  ]
                },
                "frontmatter": {
                  "tags": [
                    "Another tag",
                    "My example",
                    "Post"
                  ]
                }
              }
            },
            {
              "node": {
                "fields": {
                  "tags": [
                    "example",
                    "post"
                  ]
                },
                "frontmatter": {
                  "tags": [
                    "Example",
                    "Post"
                  ]
                }
              }
            }
          ]
        }
      ]
    }
  },
}

我怎样才能得到这样的对象：

{ "tags": 
  [
   { "slug": "another-tag", "frontmatter": "Another Tag"},
   { "slug": "example", "frontmatter": "Example"}
  ]
}

【问题讨论】：

标签： graphql gatsby graphiql gatsby-plugin

【解决方案1】：

我目前的方法是在视图本身。我遍历 fields.tags 并在数组中搜索它们。我保存索引并将其用于 frontmatter.tags（它们的顺序相同）

正是那个代码：

<ul className="tagcloud">
  {tags.group.map((tag, idx) => {
    var index = tag.edges[0].node.frontmatter.tags.indexOf(
      tag.fieldValue
    )

    return (
      <li key={idx}>
        <Link
          to={`/tags/${tag.edges[0].node.fields.tags[index]}`}
          className="transition link"
        >
          {tag.fieldValue}
        </Link>
      </li>
    )
  })}
</ul>

【讨论】：