盖茨比问题中的createPages;重复和未呈现的内容 [英] createPages in Gatsby issues ; duplications and unrendered content

问题描述

尝试呈现单个博客文章时出现了一些错误.

I've had a few errors trying to render single blog posts.

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

I tried using the page template with /post/{post_name} and I was getting this error:

warn非确定性路由危险:尝试创建页面"/blog/"，但是页面"/博客"已经存在这可能导致不确定的路由行为

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

I tried again with /blog/{post_name}.

我现在有两条路线，不确定如何清理；但更重要的是，在那些页面上，什么都没有呈现，即使应该有一个h1，它的innerhtml设置为node.title，内容也同样是一个div.

I now have both routes, which I'm not sure how to clean up; but more importantly, on those pages, nothing renders, even though there should be an h1 with it's innerhtml set to the node.title and likewise a div for the content.

我已经将配置和组件上传到 https://github.com/zackrosegithub/gatsby，所以您可以看看.

I've uploaded my config and components to https://github.com/zackrosegithub/gatsby so you can have a look.

不确定如何解决

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

I just want to see my content rendered on the screen.

当没有内容呈现时，开发人员工具似乎无济于事，因为我找不到要检查的内容以尝试以其他方式访问它.

Developer tools don't seem to help when there's no content rendered as I can't find anything to inspect to try to access it another way.

谢谢您的帮助

推荐答案

您的方法部分正确.您正在使用基于承诺的方法，但是在使用 then()时，您已经在解决并部分解决了它，因此您无需使用

Your approach is partially correct. You are using a promise-based approach but when using then() you are already settling and partially resolving it so you don't need to use the callback of resolve(), which may be causing a duplication of the promise function so try removing it.

此外，您可能希望通过 async / await 函数使用更友好的方法.像这样:

Additionally, you may want to use a more friendly approach using async/await functions. Something like:

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

};

此外，在您的 postTemplate 中放置一个 console.log(pageContext)，以获取要达到的目标并将模板命名为:

In addition, place a console.log(pageContext) in your postTemplate to get what's reaching that point and name the template as:

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

export default Post;

这篇关于盖茨比问题中的createPages;重复和未呈现的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！