GatsbyJS: Create Posts & Pages dynamically - reactjs

Question

I am trying to create posts & pages programmatically using GatsbyJS createPages API. In order to do this am I using gatsby-source-wordpress and the WPGraphQL plugin. All this is done from gatsby-node.
I have tried editing the names of my templates and creating other template paths etc. but nothing seems to work. Any clues on what I am missing?
My code in gatsby-node:
//Create Posts
exports.createPages = async ({ actions, graphql, reporter }) => {
const result = await graphql(`
{
allWpPost {
nodes {
__typename
id
databaseId
uri
}
}
}
`)
if (result.errors) {
reporter.error("There was an error fetching posts", result.errors)
}
const { allWpPost } = result.data
const template = require.resolve(`./src/templates/WpPost.js`)
if (allWpPost.nodes.length) {
allWpPost.nodes.map(post => {
actions.createPage({
path: post.uri,
component: template,
context: post,
})
})
}
}
//Create Pages
exports.createPages = async ({ actions, graphql, reporter }) => {
const result = await graphql(`
{
allWpPage {
nodes {
__typename
id
databaseId
uri
}
}
}
`)
if (result.errors) {
reporter.error("There was an error fetching pages", result.errors)
}
const { allWpPage } = result.data
const template = require.resolve(`./src/templates/WpPage.js`)
if (allWpPage.nodes.length) {
allWpPage.nodes.map(page => {
actions.createPage({
path: page.uri,
component: template,
context: page,
})
})
}
}
My pages are being created succesfully, but my post creation doesn't seem to work at all. I see an error in my terminal:
The GraphQL query in the non-page component
"C:/Users/mig/Desktop/Gatsby/gsite/src/templates/WpPost.js" will not be run.
Exported queries are only executed for Page components. It's possible you're
trying to create pages in your gatsby-node.js and that's failing for some
reason.
If the failing component(s) is a regular component and not intended to be a page
component, you generally want to use a <StaticQuery> (https://gatsbyjs.org/docs/static-query)
instead of exporting a page query.
If you're more experienced with GraphQL, you can also export GraphQL
fragments from components and compose the fragments in the Page component
query and pass data down into the child component — https://graphql.org/learn/queries/#fragments

Answer 1

as mentioned by #natac in comments I had to create pages and post in the same exports.createPages function.
Updated Gatsby-node that solved issue:
exports.createPages = async ({ actions, graphql, reporter }) => {
const result = await graphql(`
{
allWpPage {
nodes {
__typename
id
databaseId
uri
}
}
}
`)
if (result.errors) {
reporter.error("There was an error fetching pages", result.errors)
}
const { allWpPage } = result.data
const pageTemplate = require.resolve(`./src/templates/WpPage.js`)
if (allWpPage.nodes.length) {
allWpPage.nodes.map(page => {
actions.createPage({
path: page.uri,
component: pageTemplate,
context: page,
})
})
}
const result2 = await graphql(`
{
allWpPost {
nodes {
__typename
id
databaseId
uri
}
}
}
`)
if (result2.errors) {
reporter.error("There was an error fetching posts", result.errors)
}
const { allWpPost } = result2.data
const postTemplate = require.resolve(`./src/templates/WpPost.js`)
if (allWpPost.nodes.length) {
allWpPost.nodes.map(post => {
actions.createPage({
path: post.uri,
component: postTemplate,
context: post,
})
})
}
}

Answer 2

It must work:
exports.createPages = async ({ actions, graphql, reporter }) => {
const result = await graphql(`
{allWpPage {
nodes {__typename id databaseId uri}}}`)
if (result.errors) {
reporter.error("There was an error fetching pages", result.errors)
}
const { allWpPage } = result.data
const pageTemplate = require.resolve(`./src/templates/WpPage.js`)
if (allWpPage.nodes.length) {allWpPage.nodes.map(page => {actions.createPage({path: page.uri,component: pageTemplate,context: page,})})}
const result2 = await graphql(`{allWpPost {nodes {__typename id databaseId uri}}}`)
if (result2.errors) {
reporter.error("There was an error fetching posts", result.errors)
}
const { allWpPost } = result2.data
const postTemplate = require.resolve(`./src/templates/WpPost.js`)
if (allWpPost.nodes.length) {allWpPost.nodes.map(post => {actions.createPage({path: post.uri,component: postTemplate, context: post,})})}}