GatsbyCentral / gatsby-awesome-pagination

An opinionated, more awesome approach to pagination in Gatsby
MIT License
109 stars 27 forks source link

error for specific category posts #45

Closed asimakos closed 4 years ago

asimakos commented 4 years ago

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 4 years ago

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