Reusable Pagination in Gatsby Using GraphQL

Creating a reusable pagination system in Gatsby using GraphQL without relying on external plugins involves leveraging Gatsby's built-in createPages API and writing reusable pagination logic. Here’s a step-by-step guide to building a simple yet scalable pagination system that can be reused across multiple content types such as posts, categories, and tags.

1. Setup Your Gatsby Website

Before creating a Gatsby website, you need to install the Gatsby CLI (Command Line Interface) globally on your machine.

Install Gatsby CLI

This command installs the Gatsby CLI globally on your machine so that you can run Gatsby commands from anywhere.

Create a New Gatsby Project

After installing the CLI, you can create a new Gatsby project using one of Gatsby’s starter templates.

Run the following command in your terminal to create a new project:

Check for the tailwind and MDX

This will create a new Gatsby site in a directory called gatsby-pagination.

2. Add MDX content

Add some mdx content to your content directory.

3. Setup ShadcnUI

Update the tsconfig.json file to integrate with Shadcn. Open tsconfig.json and configure it as follows:

Update/create gatsby-node.ts file

Run the Shadcn CLI

Answer the questions

Enable gatsby-source-filesystem plugin

Modify you gatsby-config.ts:

Create a post template

Inside templates folder create a new file, called post.tsx

Create a page template

Enable MDX plugin

In gatsby-config.ts add properties to 'gatsby-plugin-mdx'

Set Up GraphQL Queries

Before implementing pagination, ensure that your data sources are set up and that you can query posts, categories, and tags through GraphQL.

It's time to test

If everything is working, then let's add small helper function - getNumPages() to our lib/utils.ts file:

Create a index page

Let's fetch all our posts to index.ts file:

Then run

The result

Navigate to http://localhost:8000/2 to check the pages.

2. Create a Pagination Component

Before creating the pagination component, you need to setup Pagination component from ShadcnUI.

Last one thing you need to integrate pagination component to Gatsby.*:

Find PaginationLinkProps and PaginationLink inside ui/pagination.tsx, and replace it with:

Don't forget to import the Link from Gatsby.

Now create file posts-pagination.tsx inside your components folder.

Let's break down each part of the code:

1. Imports

Several UI components from the Shadcn Pagination Component are imported.

2. Component Props

• numPages: Total number of pages to paginate through.
• currentPage: The current page the user is on.
• slug: An optional string that is appended to the URL for each page link. It defaults to an empty string if not provided. You can provide a string "tag/some-tag" or "category/some-category" to specify the path

3. Ellipsis Before and After Current Page

If there are more than two pages between the first page and the current page (i.e., there are skipped pages), it shows an ellipsis (...).

4. Page Number Links

This dynamically generates pagination links for each page.

This PostsPagination component is a reusable, well-structured pagination system for Gatsby or any React project. It efficiently handles pagination UI, showing a limited range of pages around the current one and allowing navigation via next/previous buttons. The ellipsis keeps the UI clean when dealing with a large number of pages.

Connect Pagination to Index and Page Template

Now you've created a reusable pagination component in Gatsby. You can use this component to paginate through posts, categories, or tags. This scalable solution ensures that your content is well-organized and easy to navigate, especially as your dataset grows.