Блог

Я не смог найти только одно другое сообщение в stackoverflow по этому вопросу. Любая помощь была бы отличной! Я следовал руководству здесь, чтобы попытаться использовать Gatsby с GraphQL. Но я продолжаю получать ошибку:

ОШИБКА # 11322

Ваш сайт «gatsby-node.js » создал страницу и не передал путь к компоненту.

Объект страницы передан в createPage: { «path»: «/blog/technical-seo-with-graphcms», «componenent»: «/Users/ela/Yao/Dev/paper-plane-project/src/templates/BlogPosts.js «, «context»: { «post»: { «id»: «ckadrcx4g00pw01525c5d2e56», «title»: «Техническое SEO с GraphCMS», «slug»: «technical-seo-with-graphcms», «tags»: [«SEO» ], «author»: { «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;  

Любая помощь была бы замечательной. Я действительно ничего не могу найти в Интернете для этой ошибки.

У вас опечатка в вашей createPage функции. Вы ввели componenent вместо component . Должно быть:

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

Кроме того, если вы проверите репозиторий, предоставленный в упомянутом вами руководстве, вы можете найти полную конфигурацию.