GatsbyJS：createPage 在 WordPress 阅读设置中跳过页面

Question

我在我的网站上使用 GatsbyJS 和 gatsby-source-wordpress。是否可以通过某种方式跳过在创建页面期间在我的 WordPress 站点的阅读设置中分配的首页和博客页面？

在研究过程中，我发现了 Ash Hitchcock 的 WordPress 插件 wp-graphql-homepage，其中 returns 主页的页面类型和 post 在阅读设置下设置的页面。但是，仍然不太确定是否应该使用它来完成我正在尝试的事情？

我还发现我可以查询 isPostsPage 和 isFrontPage。也许一旦我有了这些，我就可以在运行 createPages.

时将过滤器链接到 allWpPage.nodes

例如，allWpPage.nodes.filter(node => !node.isFrontPage || !node.isPostsPage).map(...？只是不太确定怎么做？

我之所以要跳过头版和post页是因为我在src/pages中确实有一个index.js和blog.js。因此，当运行ning 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.

我的 gatsby-node 文件：

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

差一点！我不得不使用 isPostsPage 和 isFrontPage，如 OP 中所写。然后我可以使用例如 !node.isfrontPage 使其跳过首页和后页。我最终的 gatsby-node 有效并解决了问题：

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

编辑解决方案二 - 可能更好的解决方案：

可以直接使用 graphql 查询过滤器过滤 isFrontPage 和 isPostsPage。像这样：

query MyQuery {
  allWpPage(filter: {isFrontPage: {eq: false}, isPostsPage: {eq: false}}) {
    nodes {
      isPostsPage
      isFrontPage
      uri
      title
    }
  }
}

更新和最终的 gatsby-node 文件：

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 在 WordPress 阅读设置中跳过页面

GatsbyJS: createPage skip pages in WordPress reading settings

wordpress

reactjs

graphql

gatsby