Gatsby js ошибка разбивки на страницы для заданных c сообщений категории

Question

У меня есть файлы уценки (.md), в которых я определил поля метаданных вместе с полем категории. В моем конкретном примере c у меня есть только две категории относительно всех моих файлов .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
---

et c

Затем в моем файле gatsby- node.js, Я пытаюсь получить доступ ко всем этим категориям и предоставить их вместе с их конкретными c сообщениями в конкретный файл шаблона js (Соответствует js), создавая разные URL-адреса для доступа. Кроме того, я использую gatsby-awesome-pagination в том же файле шаблона js (Comply. js), чтобы определить разбиение на страницы для каждого конкретного c 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 (Соответствует. js), в котором у меня есть ошибки относительно моего запроса graphql (передача параметров) переменная $ категория требуемой строки! не была указана переменная $ limit требуемого Int! не была указана переменная $ skip требуемого Int! не был предоставлен

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

Есть идеи, которые могли бы мне помочь?

gatsby_error_page

С уважением

Answer 1

В вашем Comply.js ваш запрос GraphQL предоставляет 3 фильтра в query($category:String!,$skip:Int!,$limit:Int!), кроме того, все они являются обязательными и не могут иметь значение NULL (у них есть восклицательный знак, !. Здесь вы можете проверить наличие дополнительная информация о схеме GraphQL ). Это означает, что вы должны указать эти параметры для своего запроса. Поскольку в:

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, но вам не нужно требовать, чтобы они не допускали значения NULL, это может вызвать проблемы при работе со строками в запросах GraphQL.