Tag cloud and Category list with gatsby-plugin-categories / gatsby-plugin-tags - graphql

Question

I wanna create a tag cloud (or category list) which should link to the corresponding tagged articles and category. But in the queries I built only the name OR slug are concatenated because they are placed either in fields OR in frontmatter but not in one object
I use this two plugins which are widely used: https://github.com/rmcfadzean/gatsby-pantry
This is my current query:
{
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"
]
}
}
}
]
}
]
}
},
}
How can I get objects something like this:
{ "tags":
[
{ "slug": "another-tag", "frontmatter": "Another Tag"},
{ "slug": "example", "frontmatter": "Example"}
]
}

Answer 1

My current approach is in the view itself. I iterate through the fields.tags and search for them in the array. I save the index and use it for frontmatter.tags (they are happily in the same order)
It is exactly that code:
<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>