特定类别帖子的 Gatsbyjs 分页错误

Question

我有一些降价 (.md) 文件，其中我定义了一些元数据字段以及类别字段。在我的具体示例中，我的所有 .md 文件只有两个类别。

---
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
---

等

之后，在我的 gatsby-node.js 文件中，我尝试访问所有这些类别，并通过创建不同的 url 进行访问，将它们连同它们的特定帖子一起提供给特定的模板 js (Comply.js) 文件。此外，我在同一个模板 js (Comply.js) 文件中使用 gatsby-awesome-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,
            },
        })
    })

}

最后我定义了我的模板 js (Comply.js) 文件，我在其中遇到了有关我的 graphql 查询的错误（参数传递） 所需字符串的变量 $category！没有提供 所需 Int 的变量 $limit！没有提供 所需 Int 的变量 $skip!没有提供

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>
      <h3> Συμμόρφωση αναθετουσών </h3>
      {data.allMarkdownRemark.edges.map(edge=>{
       
      const {node}=edge
      const {frontmatter,fields}=node
       
       return(
       <Article key={fields.slug} title={frontmatter.title} contractor={frontmatter.contractor} location={fields.slug} date={frontmatter.date}></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 {
        frontmatter {
          title
          email
          date(formatString: "MMMM  DD, YYYY")
          contractor
        }
        fields {
          slug
        }
      }
    }
  }
 }
    `

有什么可以帮助我的想法吗？

问候

Answer 1

在您的 Comply.js 中，您的 GraphQL 查询在 query($category:String!,$skip:Int!,$limit:Int!) 中公开了 3 个过滤器，此外，它们都是强制性的，不能为空（它们带有感叹号，!。在这里您可以检查有关GraphQL schema 的更多信息）。这意味着您必须为您的查询提供这些参数。自在：

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

您没有提供其余参数，您的代码会中断。我建议删除类别过滤器中的感叹号，显然，提供skip 和limit 值。为此，您必须通过pageContext API 传递这些变量。

query($category:String,$skip:Int!,$limit:Int!)

还有：

createPage({
  path: `/${fieldValue}`,
  component: path.resolve(`./src/templates/Comply.js`),
  context: {
    category: fieldValue,
    skip: 3 // or any desired value
    limit: 5 // or any desired value
  },
})

我假设您正在正确检索您的 fieldValue，但您不需要要求它们不可为空，这可能会在处理 GraphQL 查询中的字符串时引起问题。