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

Question

我目前正在尝试使用gatsbyjs创建一个博客站点，并希望我的博客文章能够以编程方式为他们创建页面。

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

盖茨比-的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)
}) 
}

博客，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文件的同时，它仍然会抛出“unknown argument' 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
     }
    }
   }
 `