wordpress - createPages in Gatsby issues ; duplications and unrendered content

Question

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

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

warn Non-deterministic routing danger: Attempting to create page: "/blog/", but page "/blog" already exists This could lead to non-deterministic routing behavior

I tried again with /blog/{post_name}.

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.

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

Not sure how to fix

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.

Thank you for your help

question from:https://stackoverflow.com/questions/65917497/createpages-in-gatsby-issues-duplications-and-unrendered-content

Answer 1

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.

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

};

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;