Using createPages with User Auth and static content - node.js

Question

I want to generate pages from my GraphQl calls and I also want to enable the create page when the window path finds the app term, as you would when switching to a more app approach. I heard I could make it work by putting the if statement inside of the graphql promise I'm not really sure how. My build doesn't complete it gives me path is not defined. Any help is appreciated
const path = require(`path`)
// Log out information after a build is done
exports.onPostBuild = ({reporter}) => {
reporter.info(`Your Gatsby site has been built!`)
}
exports.createPages = ({page, actions, graphql}) => {
const {createPage} = actions
if (page.path.match(/^\/app/)) {
// page.matchPath is a special key that's used for matching pages
// with corresponding routes only on the client.
page.matchPath = '/app/*'
// Update the page.
createPage(page)
}
let query1 = new Promise((resolve, reject) => {
graphql(`
{
allDatoCmsBlog {
edges {
node {
slug
}
}
}
}
`).then(result => {
result.data.allDatoCmsBlog.edges.map(({node}) => {
createPage({
path: `blog/${node.slug}`,
component: path.resolve(`./src/templates/article.js`),
context: {
slug: node.slug,
},
})
})
resolve()
})
})
let query2 = new Promise((resolve, reject) => {
graphql(`
{
allDatoCmsBlog {
edges {
node {
slug
category
}
}
}
}
`).then(result => {
result.data.allDatoCmsBlog.edges.map(({node}) => {
createPage({
path: `blog/categoria/${node.category}`,
component: path.resolve(`./src/templates/gather-category.js`),
context: {
category: node.category,
},
})
})
})
resolve()
})
return query1, query2
}

Answer 1

Note that you are wrapping inside createPages instead of onCreatePage. You can keep both logics, but in two different export methods:
exports.createPages = ({page, actions, graphql}) => {
// your logic of page creation
}
exports.onCreatePage = async ({ page, actions }) => {
const { createPage } = actions
if (page.path.match(/^\/app/)) {
page.matchPath = "/app/*"
createPage(page)
}
}
Alternatively, you can use the gatsby-plugin-create-client-paths plugin. In your gatsby-config.js:
{
resolve: `gatsby-plugin-create-client-paths`,
options: { prefixes: [`/app/*`] },
},
Simply as that.