特定类别帖子的Gatsbyjs分页错误
我有一些标记(.md)文件,其中定义了一些元数据字段和一个类别字段。在我的具体示例中,关于所有.md文件,我只有两个类别特定类别帖子的Gatsbyjs分页错误,gatsby,Gatsby,我有一些标记(.md)文件,其中定义了一些元数据字段和一个类别字段。在我的具体示例中,关于所有.md文件,我只有两个类别 --- title: ΑΠΟΦΑΣΗ 30/2020 date: 2020-06-21 contractor: ΔΗΜΟΣ ΗΡΑΚΛΕΙΟΥ ΚΡΗΤΗΣ email: info@heraklion.gr category: nocomply --- --- title: ΑΠΟΦΑΣΗ 29/2020 date: 2020-06-19 contractor: ΔΗΜΟΣ
---
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(complial.js)文件。此外,我在同一个模板js(complial.js)文件中使用gatsby awesome分页来定义每个特定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(complial.js)文件,在这里我遇到了关于graphql查询(参数传递)的错误
所需字符串的变量$category!没有提供
所需整数的可变$limit!没有提供
所需整数的变量$skip!没有提供
从“React”导入React
从“../components/Layout”导入布局
从“../components/Article”导入项目
从“../components/Pager”导入寻呼机
从“盖茨比”导入{graphql}
const compliance=({data,pageContext})=>{
返回(
Συμμόρφωση αναθετουσών
{data.allMarkdownRemark.edges.map(edge=>{
常数{node}=边
const{frontmatter,fields}=node
返回(
关于Comply.js
中的,您的GraphQL查询在查询中公开了3个过滤器($category:String!、$skip:Int!、$limit:Int!)
,此外,所有过滤器都是强制性的,不能为空(它们带有感叹号,!
。您可以在这里查看有关的更多信息)。这意味着您必须为查询提供这些参数。因为:
createPage({
path: `/${fieldValue}`,
component: path.resolve(`./src/templates/Comply.js`),
context: {
category: fieldValue,
},
})
您没有提供其余的参数,代码会中断。我建议删除类别筛选器中的感叹号,并提供skip
和limit
值。要实现这一点,您必须通过这些变量
以及:
我假设您正在正确地检索字段值,但您不需要要求它们为不可为空,这可能会导致在处理GraphQL查询中的字符串时出现问题。感谢您的帮助!我不提供skip和limit的任何值(通过Int声明这两个值),因为我希望看到每个特定类别的所有帖子,当然也不要错过任何一篇。到目前为止还不错,但关于我的分页插件,我没有看到它通过上一个和下一个链接(对于/comply和/nocomply类别url)对每个类别url起作用.根据我的一点经验,我认为pagination只通过访问/Compliance/1、/Compliance/2等(我有3个Compliance类别的帖子,1个nocomply类别的帖子)接收所有帖子,而不是每个类别的特定帖子RegardsI已经做了,这是好的!我有一个问题与分页插件。它不适用于每个类别的url。只访问类别_url/2等,它没有得到正确的职位为每个类别。
createPage({
path: `/${fieldValue}`,
component: path.resolve(`./src/templates/Comply.js`),
context: {
category: fieldValue,
},
})
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
},
})