itemsPerPage not working

[hrishikesh-k]

Hello.

I have used a starter (https://www.gatsbyjs.org/starters/panr/gatsby-starter-hello-friend/), but, I was trying to implement Mdx in that (it currently uses Remark). While I could port everything else by following various documentations, one thing I wasn't able to fix was this pagination. Currently, I have 5 demo posts, so, I have set itemsPerPage to 2. This should result in 3 pages, which is happening, but, all the 3 pages are showing all the 5 posts.

This is my gatsby-node.js:

const {paginate} = require('gatsby-awesome-pagination')
const path = require('path')
const indexTemplate = path.resolve(`./src/templates/index.js`)
exports.createPages = ({actions, graphql, getNodes}) =>
  {
    const {createPage} = actions
    const allNodes = getNodes()
    return graphql(`
      {
        allMdx(sort: {fields: [frontmatter___date], order: DESC})
          {
            edges
              {
                node
                  {
                    frontmatter
                      {
                        path
                        tags
                      }
                  }
              }
          }
      }`).then(result =>
        {
          if (result.errors) {return Promise.reject(result.errors)}
          const posts = allNodes.filter(node => node.internal.type === `Mdx`)
          paginate({createPage, items: posts, component: indexTemplate, itemsPerPage: 2, pathPrefix: '/projects'})
        })
  }

and this is my .src/templates/index.js

import React from 'react'
import PropTypes from 'prop-types'
import {graphql} from 'gatsby'
import SEO from '../components/seo'
import Layout from '../components/layout'
import Post from '../components/post'
import Navigation from '../components/navigation'
const Index = ({data: {allMdx: {edges}}, pageContext: {nextPagePath, previousPagePath}}) =>
  {
    const Posts = edges
    return (
      <>
      <SEO/>
      <Layout>
        {
          Posts.map(({node}) =>
            {
              const {id, frontmatter: {title, date, path, author, coverImage, excerpt, tags}} = node
              return (<Post key = {id} title = {title} date = {date} path = {path} author = {author} coverImage = {coverImage} tags = {tags} excerpt = {excerpt}/>)
            })
        }
        <Navigation previousPath = {previousPagePath} previousLabel = "Newer posts" nextPath = {nextPagePath} nextLabel = "Older posts"/>
      </Layout>
      </>)
  }
Index.propTypes =
  {
    data: PropTypes.object.isRequired,
    pageContext: PropTypes.shape({nextPagePath: PropTypes.string, previousPagePath: PropTypes.string})
  }
export const postsQuery = graphql`query
  {
    allMdx(sort: {fields: [frontmatter___date], order: DESC})
      {
        edges
          {
            node
              {
                id
                frontmatter
                  {
                    title
                    date(formatString: "DD MMMM YYYY")
                    path
                    author
                    excerpt
                    tags
                    coverImage
                  }
              }
          }
      }
  }`
export default Index

I'm not a programmer, but, I'm guessing my problem is with index.js, however, I don't know what exactly. Only one thing I can say for sure is this happened only when I moved to Mdx from Remark, but, I need Mdx to be able to use JSX components in some Markdown pages.

Since, I'm also using aLayout component in the index.js, here's the code for that (it's unlikely that this is causing the issue, but, here it goes):

/* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid, no-useless-concat */
import React from 'react'
import PropTypes from 'prop-types'
import {useStaticQuery, graphql, Link} from 'gatsby'
import Header from './header'
import Footer from './footer'
import '../styles/layout.pcss'
import style from '../styles/navigation.module.pcss'
const Layout = ({children}) => 
  {
    const data = useStaticQuery(graphql`query SiteTitleQuery
      {
        site
          {
            siteMetadata
              {
                title
                logoText
                copyrights
                mainMenu
                  {
                    title
                    path
                  }
                showMenuItems
                menuMoreText
              }
          }
      }`)
    const {title, logoText, mainMenu, showMenuItems, menuMoreText, copyrights} = data.site.siteMetadata
    return (
      <div className = "container">
        <div id = "top"></div>
        <Header siteTitle = {title} logoText = {logoText} mainMenu = {mainMenu} mainMenuItems = {showMenuItems} menuMoreText = {menuMoreText}/>
        <div style = {{height: '50px'}}></div>
        <div className = "content">{children}</div>
        <Footer copyrights = {copyrights}/>
          <span className = {style.scrollTop}>
            <Link to = '#top'>
              <span className = {style.buttonText}>Scroll to top</span>
              <span className = {style.iconNext}>&#8593;</span>
            </Link>
          </span>
      </div>)
  }
Layout.propTypes = {children: PropTypes.node.isRequired,}
export default Layout

[hrishikesh-k]

Nevermind about this now. I moved to another starter with Mdx built-in.