GatsbyCentral/gatsby-awesome-pagination

error for specific category posts

Closed this issue · 1 comments

I have got some markdown (.md) files where i have defined some metadata fields along with a category field. In my specific example, i have got only two categories regarding all my .md files.

---
title: ΑΠΟΦΑΣΗ 30/2020
date: 2020-06-21
contractor: ΔΗΜΟΣ ΗΡΑΚΛΕΙΟΥ ΚΡΗΤΗΣ
email: info@heraklion.gr
category: nocomply
---

---
title: ΑΠΟΦΑΣΗ 29/2020
date: 2020-06-19
contractor: ΔΗΜΟΣ ΠΑΤΡΕΩΝ
email: info@patras.gr
category: comply
---

etc

Afterwards in my gatsby-node.js file, i try to access all these categories and provide them along with their specific posts to a particular template js (Comply.js) file by creating different urls for access. Additionally i use gatsby-awesome-pagination in the same template js (Comply.js) file to define pagination for each specific url.

For your better assistance i attach some images regarding category url and pagination url.

/**
 * Implement Gatsby's Node APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/node-apis/
 */

 const {createFilePath} = require(`gatsby-source-filesystem`)
 const path = require(`path`)
 const {paginate} = require(`gatsby-awesome-pagination`)

exports.onCreateNode=({node,getNode,actions})=>{

	if (node.internal.type === 'MarkdownRemark'){

		const slug = createFilePath({node,getNode,basePath:`content`})

        actions.createNodeField({
        	node,
        	name:`slug`,
        	value:`${slug}`
        })
	}
}

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

	const {createPage}=actions

	const results=await graphql(`
     query {
		  allMarkdownRemark {
		    edges {
		      node {
		        fields {
		          slug
		        }
		      }
		    }
		  }
        }
    `)

    if (results.errors){
    	console.error(results.errors)
    	return
    }

   const compliance=await graphql(`
     query {
          allMarkdownRemark {
            group(field: frontmatter___category) {
              fieldValue
              nodes {
                frontmatter {
                  title
                }
       }
     }
          }
        }
    `)

   if (compliance.errors){
        console.error(compliance.errors)
        return
    }

    compliance.data.allMarkdownRemark.group.forEach(({ nodes: posts, fieldValue: category }) => {
    paginate({
      createPage,
      items: posts,
      itemsPerPage: 2,
      pathPrefix: `/${category}`, 
      component: path.resolve(`./src/templates/Comply.js`), 
    })   
  })

   const categories = compliance.data.allMarkdownRemark.group

   categories.forEach(({ fieldValue }) => {
    
    createPage({
      path: `/${fieldValue}`,
      component: path.resolve(`./src/templates/Comply.js`),
      context: {
        category: fieldValue,
       },
    })
  })

    results.data.allMarkdownRemark.edges.forEach(post=>{

    	const {node}=post
    	const {fields}=node

    	createPage({
    		path:fields.slug,
    		component:path.resolve(`./src/templates/BlogPost.js`),
    		context:{
    			slug:fields.slug,
    		},
    	})
    })
}

Finally i define my template js (Comply.js) file, where i do not get the required posts via pagination plugin. Category urls work fine and i get all the required posts belonging to a specific category.

I do not get the pagination via next and previous links for specific category urls. (In my case, i have got only /comply and /nocomply category urls). Additionally, i think pagination receives all the posts and not the correct ones for each category that can only be viewed ONLY by visiting urls such as /comply/2, /comply/3 etc.

import React from "react"
import Layout from '../components/Layout'
import Article from '../components/Article'
import Pager from '../components/Pager'
import {graphql} from "gatsby"


const Comply = ({data,pageContext})=>{


	return(
	  <>
	  <Layout>
      
      {data.allMarkdownRemark.edges.map(edge=>{
       
      const {node}=edge
      const {frontmatter,fields,html}=node
       
       return(
       <Article key={fields.slug} title={frontmatter.title} contractor={frontmatter.contractor} location={fields.slug} date={frontmatter.date} html={html} email={frontmatter.email}></Article>
          )

      	})}
      	
      <Pager pageContext={pageContext} />
      </Layout>
      </> 
       )

}

export default Comply


export const pageQuery=graphql `
    query($category:String,$skip:Int,$limit:Int) {
    allMarkdownRemark(
    filter: {frontmatter: {category: {eq: $category}}}, sort: {fields: frontmatter___date, order: ASC},
    skip: $skip,
    limit: $limit) {
    edges {
      node {
        html
        frontmatter {
          title
          email
          date(formatString: "MMMM  DD, YYYY")
          contractor
        }
        fields {
          slug
        }
      }
    }
  }
 }
    `

Category url with correct data (no pagination links)

comply1

Pagination url with links and no correct data

comply2

Any idea that could help me?

Regards

chmac commented

I'm afraid we don't provide free-of-charge technical support here. I recommend trying stack overflow.