时间戳

首页 > 解决方案 > 盖茨比问题中的 createPages ；重复和未呈现的内容

wordpress - 盖茨比问题中的 createPages ；重复和未呈现的内容

问题描述

我在尝试呈现单个博客文章时遇到了一些错误。

我尝试将页面模板与 /post/{post_name} 一起使用，但出现此错误：

警告非确定性路由危险：尝试创建页面：“/blog/”，但页面“/blog”已存在这可能导致非确定性路由行为

我再次尝试使用 /blog/{post_name}。

我现在有两条路线，但我不知道如何清理；但更重要的是，在这些页面上，没有任何内容呈现，即使应该有一个 h1 的 innerhtml 设置为 node.title 并且同样是一个内容的 div。

我已将我的配置和组件上传到https://github.com/zackrosegithub/gatsby，以便您查看。

不知道如何修复

我只想看到我的内容呈现在屏幕上。

当没有呈现内容时，开发人员工具似乎无济于事，因为我找不到任何要检查的东西来尝试以另一种方式访问​​它。

谢谢您的帮助

标签： wordpressgatsbyheadless-cms

解决方案

您的方法部分正确。您正在使用基于 Promise 的方法，但是在使用时then()您已经解决并部分解决了它，因此您不需要使用 的回调resolve()，这可能会导致 Promise 函数的重复，因此请尝试将其删除。

此外，您可能希望使用async/await函数使用更友好的方法。就像是：

exports.createPages = async ({ graphql, actions, reporter }) => {
  const yourQuery= await graphql(
          `
            {
              allWordpressPost {
                edges{
                  node{
                    id
                    title
                    slug
                    excerpt
                    content
                  }
                }
              }
            }
          `
  if (yourQuery.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`);

    return;
  }
  

          const postTemplate = path.resolve("./src/templates/post.js")
          _.each(yourQuery.data.allWordpressPost.edges, edge => {
            createPage({
              path: `/post/${edge.node.slug}/`,
              component: slash(postTemplate),
              context: edge.node,
            })
          })
        })

 // and so on for the rest of the queries

};

此外，console.log(pageContext)在您的中放置一个postTemplate以获取达到该点的内容并将模板命名为：

const Post = ({pageContext}) => {
 console.log("your pageContext is", pageContext); 
return  <div>
        <h1>
            {pageContext.title}
        </h1>
    </div>
}

export default Post;

推荐阅读