GatsbyJS: createPage skip pages in WordPress reading settings

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,
      })
    })
  }
}

TurboTobias TurboTobias · Accepted Answer · 2021-04-25T07:49:45

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,
      })
    })
  }
}

GatsbyJS: createPage skip pages in WordPress reading settings

1 Answers