Gatsby 错误：您网站的“gatsby-node.js”创建了一个页面并且没有将路径传递给组件

Question

我只能在 stackoverflow 上找到关于这个问题的另一篇文章。任何帮助都会很棒！我一直在按照教程here 尝试将 Gatsby 与 GraphQL 一起使用。但我不断收到错误：

错误 #11322

您网站的“gatsby-node.js”创建了一个页面，但没有传递路径 到组件。

传递给createPage的页面对象：{ "路径": "/blog/technical-seo-with-graphcms", "组件": "/Users/ela/Yao/Dev/paper-plane-project/src/templates/BlogPosts.js", “语境”： { “邮政”： { “id”：“ckadrcx4g00pw01525c5d2e56”， "title": "GraphCMS 技术 SEO", "slug": "technical-seo-with-graphcms", “标签”：[ “搜索引擎优化” ], “作者”： { “id”：“ckadqepn400gv0108p4debydk”， “名称”：“杰西·马丁” } } } }

这是我的 gatsby-node.js：

const path = require(`path`);

exports.createPages = async({graphql, actions: {createPage}}) => {
    const {data: {gcms : { posts }}} = await graphql(`
     query {
        gcms {
            posts (stage: PUBLISHED) {
                id
                title
                slug
                tags
                author {
                    id
                    name
                }
            }
        }
    }
    `);

    // const posts = pageQuery.data.gcms.posts

    const blogTemplates = {
        Article: path.resolve('./src/templates/BlogPosts.js'),
      }

    posts.forEach(post => createPage({
        path: `/blog/${post.slug}`,
        componenent: blogTemplates.Article,
        context : {
            post : post,
        }
    })
  );
}

这是我的 BlogPosts.js 模板文件：

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

const BlogPosts = (props) => {
    const { post } = props.post;
    return (
        <React.Fragment>
            <h1>{post.title}</h1>
        </React.Fragment>    
    
)};

export default BlogPosts;

任何帮助都会很棒。我真的在网上找不到任何关于这个错误的东西。

Answer 1

您的createPage 函数中有错字。您输入了 componenent 而不是 component。应该是：

posts.forEach(post => createPage({
    path: `/blog/${post.slug}`,
    component: blogTemplates.Article,
    context : {
        post : post,
    }
})

另外，如果你检查repository provided in the tutorial you mentioned你可以找到完整的配置。