GraphQL query limiting tag count

user_2074310 0
Viewed 139

This is GraphQL query from the gatsby project:

const Data = useStaticQuery(graphql`
    query {
      allMarkdownRemark(
        sort: { fields: [frontmatter___date], order: DESC }
        limit: 5
      ) {
        edges {
          node {
            excerpt(pruneLength: 300)
            fields {
              slug
            }
            frontmatter {
              date(formatString: "DD [<span>] MMM [</span>]")
              title
              description
              tags
            }
          }
        }
        group(field: frontmatter___tags) {
          totalCount
          fieldValue
        }
      }
    }
  `);

  const Posts = Data.allMarkdownRemark.edges;
  const Tags = Data.allMarkdownRemark.group;

The above code is used to show the latest 5 posts and all the tags (including count of each tag). The problem is after showing 5 latest posts it only shows tag count of 5.

If I apply limit of 2000 to the group section as shown below, I get error while doing gatsby develop.

group(field: frontmatter___tags, limit: 2000)

Here is my GraphQL IDE output for the query:

{
  allMarkdownRemark(sort: {fields: id}) {
    group(field: frontmatter___tags) {
      totalCount
      fieldValue
    }
  }
}

output:

{
  "data": {
    "allMarkdownRemark": {
      "group": [
        {
          "totalCount": 27,
          "fieldValue": "android"
        },
        {
          "totalCount": 24,
          "fieldValue": "c"
        },
        {
          "totalCount": 42,
          "fieldValue": "chash"
        },
        {
          "totalCount": 31,
          "fieldValue": "cplus"
        },
        {
          "totalCount": 36,
          "fieldValue": "css"
        },
        {
          "totalCount": 22,
          "fieldValue": "html"
        },
        {
          "totalCount": 24,
          "fieldValue": "html5"
        },
        {
          "totalCount": 30,
          "fieldValue": "java"
        },
        {
          "totalCount": 11,
          "fieldValue": "jsp"
        },
        {
          "totalCount": 18,
          "fieldValue": "mysql"
        },
        {
          "totalCount": 37,
          "fieldValue": "networking"
        },
        {
          "totalCount": 33,
          "fieldValue": "php"
        },
        {
          "totalCount": 8,
          "fieldValue": "xml"
        }
      ]
    }
  },
  "extensions": {}
}

Somehow the limit of 5 for latest posts is getting applied to the count of tags to be displayed.

graphql
1 Answers

In that case, run multiple queries by giving each one an alias.

Here is an example:

const Data = useStaticQuery(graphql`
    query {
      posts: allMarkdownRemark(
        sort: { fields: [frontmatter___date], order: DESC }
        limit: 5
      ) {
        edges {
          node {
            excerpt(pruneLength: 300)
            fields {
              slug
            }
            frontmatter {
              date(formatString: "DD [<span>] MMM [</span>]")
              title
              description
              tags
            }
          }
        }
      }
      tags: allMarkdownRemark(
        sort: { fields: [frontmatter___date], order: DESC }
        limit: 1000
      ) {
        group(field: frontmatter___tags) {
          totalCount
          fieldValue
        }
      }
    }
  `);

  const Posts = Data.posts.edges;
  const Tags = Data.tags.group;
user_94813870
Related