Add Pagination for tags page

[lilyntalmers]

I want to add pagination for tags page but can't do it properly.

I want something similar to this:

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

  Array.from({ length: numPages }).forEach((_, i) => {
    createPage({
      path: `/blog-page-${i + 1}`,
      component: templates.postList,
      context: {
        limit: postsPerPage,
        skip: i * postsPerPage,
        numPages,
        currentPage: i + 1,
      },
    })
  })

For this:

  tags.forEach(tag => {
    createPage({
      path: `/tag/${_.kebabCase(tag)}`,
      component: templates.tag,
      context: {
        tag,
      },
    })
  })

I have already tried this:

  Array.from({ length: numPages }).forEach((_, i) => {
    createPage({
      path: `/tag/${_.kebabCase(tag)}-${i + 1}`,
      component: templates.tag,
      context: {
        limit: postsPerPage,
        skip: i * postsPerPage,
        numPages,
        currentPage: i + 1,
        tag,
      },
    })
  })

But it's not working. Any idea how to make it working?

gatsby-node.js

const path = require('path')
const _ = require('lodash')

exports.onCreateNode = ({ node, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === 'MarkdownRemark') {
    const slugFromTitle = _.kebabCase(node.frontmatter.title)
    createNodeField({
      node,
      name: 'slug',
      value: slugFromTitle,
    })
  }
}

exports.createPages = async ({ actions, graphql }) => {
  const { createPage } = actions

  // Page templates
  const templates = {
    post: path.resolve('src/templates/single-post.js'),
    postList: path.resolve('src/templates/post-list.js'),
    tag: path.resolve('src/templates/tag-posts.js'),
    tagsPage: path.resolve('src/templates/tags-page.js'),
  }

  const res = await graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              tags
            }
            fields {
              slug
            }
          }
        }
      }
    }
  `)

  if (res.errors) return Promise.reject(res.errors)

  // Extracting all posts from res
  const posts = res.data.allMarkdownRemark.edges

  // Create single post pages
  posts.forEach(({ node }) => {
    createPage({
      path: node.fields.slug,
      component: templates.post,
      context: {
        // Passing slug for template to use to fetch the post
        slug: node.fields.slug,
      },
    })
  })

  // Create posts pagination pages
  const postsPerPage = 1
  const numPages = Math.ceil(posts.length / postsPerPage)

  Array.from({ length: numPages }).forEach((_, i) => {
    createPage({
      path: `/blog-page-${i + 1}`,
      component: templates.postList,
      context: {
        limit: postsPerPage,
        skip: i * postsPerPage,
        numPages,
        currentPage: i + 1,
      },
    })
  })
  // Get all tags
  let tags = []
  _.each(posts, edge => {
    if (_.get(edge, 'node.frontmatter.tags')) {
      tags = tags.concat(edge.node.frontmatter.tags)
    }
  })

  let tagPostCounts = {} // { tutorial: 2, design: 1}
  tags.forEach(tag => {
    // Or 0 cause it might not exist yet
    tagPostCounts[tag] = (tagPostCounts[tag] || 0) + 1
  })

  // Remove duplicates
  tags = _.uniq(tags)

  // Tags page (all tags)
  createPage({
    path: '/tags',
    component: templates.tagsPage,
    context: {
      tags,
      tagPostCounts,
    },
  })

  // Tag posts pages
  tags.forEach(tag => {
    createPage({
      path: `/tag/${_.kebabCase(tag)}`,
      component: templates.tag,
      context: {
        tag,
      },
    })
  })
}