Блог

Я хочу создать облако тегов (или список категорий), которое должно ссылаться на соответствующие помеченные статьи и категорию. Но в запросах, которые я создал, объединены только name ИЛИ 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"}
  ]
}
  

Мой текущий подход заключается в самом представлении. Я перебираю поля.теги и ищу их в массиве. Я сохраняю индекс и использую его для frontmatter.теги (к счастью, они расположены в том же порядке)

Это именно тот код:

 <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>