使用 Gatsby 如何从单个 GraphQL 查询中获取标签的总数？

Question

Reading querying data in Gatsby I've created a component that I'm trying to get all counts for each tag, example:

count.js:

import React from 'react'

import { useStaticQuery, graphql, Link } from 'gatsby'

const Count = () => {
  const data = useStaticQuery(graphql`
    query MyQuery {
      markdownRemark {
        frontmatter {
          subject
        }
      }
    }
  `)

  const subjects = data.markdownRemark.frontmatter.subject

  return (
    <>
      <ul>
        {subjects.map(subject => (
          <li key={subject}>
            <Link to={subject}>{subject}</Link>
          </li>
        ))}
      </ul>
    </>
  )
}

export default Count

markdown frontmatter:

title: FooBar
date: 2021-02-01
subject: ['mon', 'tues']
featimg: foobar.png

when I examine GraphiQL I'm only able to see one area and it's under markdownRemark that will tell me the total tag list:

{
  "data": {
    "markdownRemark": {
      "frontmatter": {
        "subject": [
          "mon",
          "tues",
          "wed"
        ]
      }
    }
  },
}

Research

• How to limit and skip after grouping in a GraphQL query to paginate the tags list page?
• How to sort by totalCount in Gatsby?

For the record I am not trying to do this for WordPress I'm using markdown. Is there a way in GraphQL to get a list of all tags and how many markdown files have each tag in a single query that I do not have to loop and iterate through? Is this possible in Gatsby and GraphQL?

Answer 1

Reading querying data in Gatsby I've created a component that I'm trying to get all counts for each tag, example:

count.js:

import React from 'react'

import { useStaticQuery, graphql, Link } from 'gatsby'

const Count = () => {
  const data = useStaticQuery(graphql`
    query MyQuery {
      markdownRemark {
        frontmatter {
          subject
        }
      }
    }
  `)

  const subjects = data.markdownRemark.frontmatter.subject

  return (
    <>
      <ul>
        {subjects.map(subject => (
          <li key={subject}>
            <Link to={subject}>{subject}</Link>
          </li>
        ))}
      </ul>
    </>
  )
}

export default Count

markdown frontmatter:

title: FooBar
date: 2021-02-01
subject: ['mon', 'tues']
featimg: foobar.png

when I examine GraphiQL I'm only able to see one area and it's under markdownRemark that will tell me the total tag list:

{
  "data": {
    "markdownRemark": {
      "frontmatter": {
        "subject": [
          "mon",
          "tues",
          "wed"
        ]
      }
    }
  },
}

Research

• How to limit and skip after grouping in a GraphQL query to paginate the tags list page?
• How to sort by totalCount in Gatsby?

For the record I am not trying to do this for WordPress I'm using markdown. Is there a way in GraphQL to get a list of all tags and how many markdown files have each tag in a single query that I do not have to loop and iterate through? Is this possible in Gatsby and GraphQL?