Adding Pagination with GatsbyJS

Do you have a lot of blog posts in your blog list and you need to paginate it? I will teach you how on your blog that uses GatsbyJS.

Modifying gatsby-node.js

If you have been following my tutorials and has a blog built with GatsbyJS, you will need to move your js file (mine is named blog.js) that has your blog lists to src/templates.

You need to do this, because if not, /blog/ will redirect you to your blog list without pagination.

In your exports.createPages method, inside .then(), you should add something like this:

const posts =
    const postsPerPage = 3;
    const numPages = Math.ceil(posts.length / postsPerPage);

    Array.from({ length: numPages }).forEach((_, i) => {
        path: i === 0 ? `/blog` : `/blog/${i + 1}`,
        component: path.resolve('./src/templates/blog.js'),
        context: {
          limit: postsPerPage,
          skip: i * postsPerPage,
          currentPage: i + 1

Modifying your blog list js file

Your graphql query should look something like this:

export const query = graphql`
query($skip: Int, $limit: Int) { 
            sort: {fields: [frontmatter___date], order: DESC}, 
            filter: {frontmatter: {path: {regex: "/^\/blog/"}}},
            limit: $limit
            skip: $skip
        ) {
      edges {
        node {
          frontmatter {
            date(formatString: "DD MMMM, YYYY")

Be aware that $skip: Int, and $limit: Int are not using Int! (with an exclamation mark), because you will get an error that says Int! is not provided. It took me a long while to figure this one out.

Inside your render method

render () {
  const {data} = this.props
  const { currentPage, numPages } = this.props.pageContext
  const isFirst = currentPage === 1
  const isLast = currentPage === numPages
  const prevPage = currentPage - 1 === 1 ? "/blog" : '/blog/' + (currentPage - 1).toString()
  const nextPage = '/blog/' + (currentPage + 1).toString()

return (
  //your blog list here
  {!isFirst && (
    <Link to={prevPage} rel="prev" className="pagination-link">
      ← Previous Page </Link>
  {!isLast && (
     <Link to={nextPage} rel="next" className="pagination-link">
     Next Page →

If something doesn't work and if it works and helped you, feel free to comment!