GatsbyJS：动态创建帖子和页面

Question

我正在尝试使用 GatsbyJS createPages API 以编程方式创建 post 和页面。为此，我使用了 gatsby-source-wordpress 和 WPGraphQL 插件。所有这些都是从 gatsby-node 完成的。

我尝试过编辑模板名称和创建其他模板路径等，但似乎没有任何效果。关于我遗漏了什么的任何线索？

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

我的页面创建成功，但我的 post 创建似乎根本不起作用。我在终端中看到一个错误：

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

正如@natac 在评论中提到的，我必须在同一个 exports.createPages 函数中创建页面和 post。

已更新解决问题的 Gatsby 节点：

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

它必须有效：

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

GatsbyJS：动态创建帖子和页面

GatsbyJS: Create Posts & Pages dynamically

wordpress

reactjs

graphql

gatsby

headless-cms