Как исправить «TypeError: Невозможно прочитать свойство« узел »неопределенного» при программном создании страниц в gatsbyjs

Question

Я пытаюсь создать блог, используя gatsbyjs, и хотел бы, чтобы страницы моего блога создавались программно, а не явно создавались в папке / src / pages.

В настоящее время я пытаюсь запроситьДанные из содержательных, что мне удалось успешно сделать в соответствии с GraphiQL.Я следовал шагам, представленным в документации, по большей части, но я продолжаю сталкиваться с этой ошибкой всякий раз, когда моя программа переходит в функцию «.forEach».

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
console.log(post)

posts.forEach((post,index)=>{
    console.log(`showing slugs: ${posts.node.slug}`)
    const previous= index === posts.length-1?null: post[index+1].node
    const next= index === 0?null: posts[index-1].node



   createPage({
        path:post.node.slug,
        component:blogPost ,
        context:{
            slug:post.node.slug,
            previous,
            next
        } 
    })

    })
}).then(resolve)
}) 

Это схема возвращаемого результата

"data": {
    "allContentfulBlog": {
      "edges": [
        {
          "node": {
            "slug": "web-developer-roadmap"
          }
        },
        {
          "node": {
            "slug": "web-fundamentals-1"
          }
        }
      ]
    }
  }

Я ожидал, что функция "forEach" будет проходить по всем моим блогам и присваивать соответствующие значения функции "createPage", но вместо этого он будет показывать, что свойство узла, доступное в моем запросе,не определено, хотя я подтвердил его наличие, зарегистрировав его на консоли, что можно увидеть в функции «forEach».

Answer 1

Проблема с вашим кодом в том, что вы пытаетесь получить доступ к объекту как к массиву

const previous= index === post.length-1?null: post[index+1].node
const next= index === 0?null: post[index-1].node

В приведенном выше коде post - это один объект.я: е { node: {} } и вы обращаетесь к нему как массив post[index+1].node.

const posts =[
    {
        node: {
            slug: "lorem"
        }
    },
    {
        node: {
            slug: "ipsum"
        }
    }
];


posts.forEach((post, i) => {
    // post is a single object. To access it's node, you need to use post.node
    console.log("current post", post);
    // To access the next post based on index
    if(i<posts.length-1) {
      console.log("Next node", posts[i + 1].node);
    }
});

Если вы хотите перейти к следующему сообщению на основе индекса, используйте posts[index-1].node.Также обязательно проверьте индекс, потому что для последнего элемента index+1 выдаст ошибку.