GatsbyJS: createPage skip pages in WordPress reading settings - reactjs

Question

I am using GatsbyJS & gatsby-source-wordpress on my site. Is it somehow possible to skip both front page and blog page that has been assigned in reading settings on my WordPress site during the creation of pages?
During research I found a WordPress plugin wp-graphql-homepage by Ash Hitchcock which returns a Page type of the homepage and page for post page set under the reading settings. However, still not quite sure if that should be used to accomplish what I am trying to?
I also found I can query for isPostsPage and isFrontPage. Maybe once I have those, I can chain filter onto allWpPage.nodes when about to run createPages.
e.g., allWpPage.nodes.filter(node => !node.isFrontPage || !node.isPostsPage).map(... ? Just not quite sure how?
The reason why I want to skip front page and post page is because I do have a index.js and blog.js placed in src/pages. Because of this, I do get a error during page creation when running gatsby develop:
{ allWpPage: { nodes: [ [Object], [Object], [Object], [Object] ] } }
unexpected error while SSRing the path: /
TypeError: Cannot read property 'localFile' of null
at IndexPage (C:\Users\mig\Desktop\Gatsby\mf20\public\webpack:\lib\src\pages\index.js:164:62)
at processChild (C:\Users\mig\Desktop\Gatsby\mf20\node_modules\react-dom\cjs\react-dom-server.node.development.js:3043:14)
at resolve (C:\Users\mig\Desktop\Gatsby\mf20\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5)
at ReactDOMServerRenderer.render (C:\Users\mig\Desktop\Gatsby\mf20\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22)
at ReactDOMServerRenderer.read (C:\Users\mig\Desktop\Gatsby\mf20\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)
at renderToString (C:\Users\mig\Desktop\Gatsby\mf20\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27)
at generateBodyHTML (C:\Users\mig\Desktop\Gatsby\mf20\public\webpack:\lib\.cache\ssr-develop-static-entry.js:259:34)
at Module../.cache/ssr-develop-static-entry.js.__webpack_exports__.default (C:\Users\mig\Desktop\Gatsby\mf20\public\webpack:\lib\.cache\ssr-develop-static-entry.js:289:19)
at C:\Users\mig\Desktop\Gatsby\mf20\node_modules\gatsby\src\utils\dev-ssr\render-dev-html-child.js:138:9
warn The path "/" errored during SSR.
Edit its component undefined to resolve the error.
My gatsby-node file:
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/page/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/post/WpPost.js`)
if (allWpPost.nodes.length) {
allWpPost.nodes.map(post => {
actions.createPage({
path: post.uri,
component: postTemplate,
context: post,
})
})
}
}

Answer 1

Almost had it! I had to use isPostsPage and isFrontPage as written in OP. I could then make it skip frontpage and postpage by using eg !node.isfrontPage. My final gatsby-node which works and solves the issue:
exports.createPages = async ({ actions, graphql, reporter }) => {
const result = await graphql(`
{
allWpPage {
nodes {
__typename
id
databaseId
uri
isFrontPage
isPostsPage
}
}
}
`)
if (result.errors) {
reporter.error("There was an error fetching pages", result.errors)
}
const { allWpPage } = result.data
const pageTemplate = require.resolve(`./src/templates/page/WpPage.js`)
if (allWpPage.nodes.length) {
allWpPage.nodes
.filter(node => !node.isFrontPage || !node.isPostsPage)
.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/post/WpPost.js`)
if (allWpPost.nodes.length) {
allWpPost.nodes.map(post => {
actions.createPage({
path: post.uri,
component: postTemplate,
context: post,
})
})
}
}
Edit solution two - Probably better solution:
It is possible to filter for isFrontPage and isPostsPage directly using graphql query filters. Something like this:
query MyQuery {
allWpPage(filter: {isFrontPage: {eq: false}, isPostsPage: {eq: false}}) {
nodes {
isPostsPage
isFrontPage
uri
title
}
}
}
Updated and final gatsby-node file:
exports.createPages = async ({ actions, graphql, reporter }) => {
const result = await graphql(`
{
allWpPage(
filter: { isFrontPage: { eq: false }, isPostsPage: { eq: false } }
) {
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/page/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/post/WpPost.js`)
if (allWpPost.nodes.length) {
allWpPost.nodes.map(post => {
actions.createPage({
path: post.uri,
component: postTemplate,
context: post,
})
})
}
}