如何修复 gatsbyjs 中的“未知参数'slug'”？

Question

我目前正在尝试使用 gatsbyjs 创建一个博客站点，并希望我的博客帖子以编程方式为其创建页面。

我按照官方文档教程部分中的步骤进行操作，但不是从 Markdown 文件创建页面，而是从内容丰富的 CMS 中提取数据。每当我运行我的代码时，我都会不断地点击这个块。

gatsby-node.js

const path= require('path')

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

const blogPost= path.resolve('./src/components/blogComponents/blog-post.js')
return new Promise((resolve,reject)=>{
    graphql(`
    {
        allContentfulBlog{
            edges{
              node{
                slug
              }
            }
          }
    }
`).then(results=>{
    // console.log(results)
    if(results.error){
        reject(results.error)
    }
      // create blog post pages
const posts=results.data.allContentfulBlog.edges

posts.forEach((post,index)=>{
    console.log(`showing slugs: ${post.node.slug}`)

   createPage({
        path:post.node.slug,
        component:blogPost ,
        context:{

            slug:post.node.slug,

        } 
    })

    })
}).then(resolve)
}) 
}

blog-post.js

   import React from 'react'
   import { graphql} from 'gatsby'


  const blogPost=({data})=>{
return (
    <div>
        new page created
    </div>
)
 }

 export default blogPost
 export const pageQuery= graphql`
  query ($slug: String!){
     allContentfulBlog (slug:{eq: $slug }) {
      edges{
      node{
       content{
           content
       }
      }
    }
  }
 }
 `

我希望 blog-post.js 文件能够接收所有适当的变量，但它在引用 blog-post.js 文件时不断抛出“未知参数 'slug'”错误。

Answer 1

在blog-post.js 中，您似乎过滤帖子不正确；要么这样做：

 export const pageQuery= graphql`
  query ($slug: String!){

-    allContentfulBlog (slug:{eq: $slug }) {

+    allContentfulBlog (filter: { slug: { eq: $slug } })

      edges {
        node {
         content {
           content
         }
        }
      }
    }
   }
 `

或者这个：

 export const pageQuery= graphql`
  query ($slug: String!){

-    allContentfulBlog (slug:{eq: $slug }) {

+    ContentfulBlog (slug:{eq: $slug }) {

     content {
       content
     }
    }
   }
 `