Using createPages with User Auth and static content (blog posts)? (Bonus routing question inside)

So I’m writing a small app and I came across an issue that I haven’t been able to solve. First, I have this here: https://www.gatsbyjs.org/tutorial/authentication-tutorial/ which allows me to use this:

// Implement the Gatsby API “onCreatePage”. This is
// called after every page is created.
exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/app/)) {
    page.matchPath = "/app/*"
    // Update the page.
    createPage(page)
  }
}

Then I’m using a graphql query to query static data (blog posts). The issue is that I’m unable to do both, for some reason.

When I run the following, I’m greeted with an error of ‘Cannot read property path of undefined.’

exports.createPages = async ({ page, actions, graphql, reporter }) => {
  const { createPage } = await actions
  if (page.path.match(/^\/anime/)) {
    page.matchPath = "/anime/*"
    createPage(page)
  }

  const result = await graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            html
            id
            frontmatter {
              path
              title
              date
              author
            }
          }
        }
      }
    }
  `)
  const blogs = result.data.allMarkdownRemark.edges

  blogs.forEach(({ node }) => {
    const title = node.frontmatter.path
    actions.createPage({
      path: `${title}`,
      component: require.resolve("./src/templates/newsletter.template.js"),
    })
  })
}

// exports.createPages = async ({ actions, graphql, reporter }) => {
// }

Now, when I run the following code, I do not get any errors. However, when I do it this way and go to the expected route of my blog(s) I’m prompted with post is null.

So my question is this: How can I use createPages/onCreatePage with both of these and have both work?

(Bonus question, but ties into the above)

When I change the route(s) of my blog post(s) in the frontmatter to /title-of-post/ ( being the starting route, in this case, it’s newsletter) I no longer have post is null as pointed out above. But, I want my blog posts to have the route name in front of them. So my question is this: How do I make all of this work?

https://github.com/Joey-Robinson/quick-anime

Is the repo name. Note: I’ve already tried making a folder in pages with the name of newsletter, but that didn’t do anything.

Edit: Formatting. Edit Two: Formatting.

[Js-Brecht]

@Joey-Robinson did that answer your questions?

[Js-Brecht]

So for the onCreatePage() and the createPages() I should just leave separated to achieve what I’m after?

Yup, that’s correct 🙂.

What’s happening under the hood is Gatsby is using gatsby-plugin-page-creator to process your pages directory. As it collects the files, it calls the createPage() action, which will trigger your onCreatePage() event.

Edit: This is what I have currently: https://github.com/Joey-Robinson/quick-anime/tree/002f6b73c253c88866fe2a4ca37d2d0633fd50dd

Looks pretty good to me. One thing that will happen here is you will wind up with double slashes at the beginning and end, since your slug reads /newsletter/the-greatness-of-cowboy-bebop/. It shouldn’t be a big deal, because your browser should just ignore double slashes.

My example was just to show one of the things you could do for organizing your posts/building your URLs. In my example, I would have made the .md file read:

slug: "the-greatness-of-cowboy-bebop"
category: "newsletter"

Then I can construct my URL from the simple values in the frontmatter. There’s plenty of ways to achieve that kind of affect, and the way you are doing it should be fine.