Error while adding pagination for Tag Posts

[lilyntalmers]

By following the tutorial on the Gatsby website I was able to create pagination for my posts but I need pagination for my tag posts too.

I have already made some changes to the code but it's not working.

Here is my original code:

gatsby-node.js

const path = require('path')
const { slugify } = require('./src/util/utilityFunctions')
const _ = require('lodash')

exports.onCreateNode = ({ node, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === 'MarkdownRemark') {
    const slugFromTitle = slugify(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 numberOfPages = Math.ceil(posts.length / postsPerPage)

  Array.from({ length: numberOfPages }).forEach((_, index) => {
    const isFirstPage = index === -1
    const currentPage = index + 1

    // Skip first page because of index.js
    if (isFirstPage) return

    createPage({
      path: `/blog-page-${currentPage}`,
      component: templates.postList,
      context: {
        limit: postsPerPage,
        skip: index * postsPerPage,
        numberOfPages: numberOfPages,
        currentPage: currentPage,
      },
    })
  })
  // 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,
      },
    })
  })
}

post-list.js

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

const BlogList  = (props) => {
  const posts = props.data.allMarkdownRemark.edges
  const { currentPage } = props.pageContext
  return (
    <Layout>
      <h1 style={{paddingTop:"80px"}}>All Post</h1>
      <p>{`Page: ${currentPage}`}</p>
      {posts.map(({ node }) => {
        const title = node.frontmatter.title || node.fields.slug
        return(
          <div key={node.fields.slug}>{title}</div>
        ) 
      })}
    </Layout>
  )
}

export const blogListQuery = graphql`
  query blogListQuery($skip: Int!, $limit: Int!) {
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            title
          }
        }
      }
    }
  }
`

export default BlogList

tag-posts.js

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

const TagPost  = ({ data, pageContext }) => {
  const { tag, currentPage } = pageContext
  const { totalCount } = data.allMarkdownRemark
  const pageHeader = `${totalCount} post${
    totalCount === 1 ? '' : 's'
  } tagged with "${tag}"`
  return (
    <Layout>
      <h1 style={{paddingTop:"80px"}}>All Post</h1>
      <p>{pageHeader}</p>
      {data.allMarkdownRemark.edges.map(({ node }) => {
        const title = node.frontmatter.title || node.fields.slug
        return(
          <div key={node.fields.slug}>{title}</div>
        ) 
      })}
    </Layout>
  )
}

export const TagPostQuery = graphql`
  query TagPostQuery($skip: Int!, $limit: Int!, $tag: String!) {
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { tags: { in: [$tag] } } }
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            title
            tags
          }
        }
      }
    }
  }
`

export default TagPost

My changed code in gatsby-node.js

 tags.forEach(tag => {
    createPage({
      path: `/tag/${_.kebabCase(tag)}-page-${currentPage}`,
      component: templates.tag,
      context: {
        tag,
        limit: postsPerPage,
        skip: index * postsPerPage,
        numberOfPages: numberOfPages,
        currentPage: currentPage,
      },
    })
  })

Can anyone please tell me where the problem is?