How to get Category Posts Count in Gatsby by Graphql Query

In this tutorial, we'll walk you through the process of obtaining the post count for each category using GraphQL in your Gatsby project.

Prerequisites:

Before you begin, ensure you have the following:

A Gatsby project set up with content categories (for instance, through Markdown files or a CMS like Contentful).
Basic knowledge of Gatsby, GraphQL, and how to create GraphQL Queries.

Step 1: Understand Your Data Structure

First, make sure your content is organized with categories. Each post should have a field that associates it with a category. This could be a "category" field in your Markdown frontmatter or a similar structure in your CMS.

Step 2: Create a GraphQL Query

Now, let's create a GraphQL query to fetch the category names and their respective post counts. Open your Gatsby project, and in your component file (where you want to display the data), add a GraphQL query. Here's an example query:

1 import React from 'react';
2 import { graphql } from 'gatsby';
3 
4 export const query = graphql`
5   query {
6     allMdx {
7       group(field: { frontmatter: { category: SELECT } }) {
8         fieldValue
9         field
10         totalCount
11       }
12       totalCategoriesCount: totalCount
13     }
14   }
15 `;
16 
17 const CategoryList = ({
18   data: {
19     allMdx: { group: categories },
20     totalCategoriesCount,
21   },
22 }) => {
23   return (
24     <div>
25       <h2>Categories and Post Counts</h2>
26       <ul>
27         {categories.map((category) => (
28           <li key={category.fieldValue}>
29             {category.fieldValue} ({category.totalCount} posts)
30           </li>
31         ))}
32       </ul>
33     </div>
34   );
35 };
36 
37 export default CategoryList;

Step 3: Display the Data

The GraphQL query retrieves data in the data prop of your component. We then map through the categories array and display each category's name along with its post count.

Conclusion:

With GraphQL and Gatsby, obtaining category post counts for your website becomes a straightforward process. By creating a GraphQL query that groups posts by category and includes the count, you can provide valuable information to your site visitors and enhance their user experience. This feature adds a level of interactivity and engagement to your Gatsby-powered blog or website, making it a more informative and user-friendly platform.