将第二个动态模板正确添加到Gatsby / NetlifyCMS-我哪里出错了？

如何解决将第二个动态模板正确添加到Gatsby / NetlifyCMS-我哪里出错了？

我添加了一个博客页面，该页面与NetlifyCMS集成在一起，效果很好。但是，我需要在网站上再有一个动态页面来显示服务，并且每个服务都将具有自己生成的模板，从理论上讲，这与博客页面非常相似。

因此，我阅读了许多不同的解决方案，但一直碰壁。我在这里做错了什么？以及使这项工作最简单的方法是什么，因为我不会添加任何其他动态页面。

当我只有博客页面时，这就是我的gatsby-node.js，并且一切正常：

const { createFilePath } = require("gatsby-source-filesystem")
exports.onCreateNode = ({ node,actions,getNode }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node,getNode })
    createNodeField({
      name: `slug`,node,value,})
  }
}

//Blog
async function getPageData(graphql) {
  return await graphql(`
    {
      blogPosts: allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)
}

const path = require(`path`)
exports.createPages = async ({ graphql,actions }) => {
  const { data } = await getPageData(graphql)
  data.blogPosts.edges.forEach(({ node }) => {
    const { slug } = node.fields
    actions.createPage({
      path: `/articles${slug}`,component: path.resolve("./src/templates/articlepost.js"),context: {slug: slug },})
  })
}

因此，我刺了一下它，尝试做同样的事情，但是添加了我的服务页面。这就是最终的样子：

gatsby-node.js

const { createFilePath } = require("gatsby-source-filesystem")
exports.onCreateNode = ({ node,})
  }
}

async function getBlogData(graphql) {
  return await graphql(`
    {
      blogPosts: allMarkdownRemark(
        filter: { frontmatter: { template: { eq: "articlepost" } } }
      ) {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)
}

async function getServiceData(graphql) {
  return await graphql(`
    {
      servicePosts: allMarkdownRemark(
        filter: { frontmatter: { template: { eq: "service" } } }
      ) {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)
}

const path = require(`path`)
exports.createPages = async ({ graphql,actions }) => {
  const blogPage = path.resolve("./src/templates/articlepost.js")
  const servicePage = path.resolve("./src/templates/service.js")

  const { data } = await getBlogData(graphql)
  data.blogPosts.edges.forEach(({ node }) => {
    const { slug } = node.fields
    actions.createPage({
      path: `/articles${slug}`,component: blogPage,context: { slug: slug },})
  })

  const { serviceData } = await getServiceData(graphql)
  serviceData.servicePosts.edges.forEach(({ node }) => {
    const { slug } = node.fields
    actions.createPage({
      path: `/streaming-services${slug}`,component: servicePage,})
  })
}

我的博客页面仍然可以正常工作，但出现错误：

如您所见，我在config.yml中添加了一个模板类型，该模板类型现在显示在我的最前面，以分隔我的帖子，但是我认为这可能会使我更加困惑。从frontmatter删除模板类型完全可以，但是确实需要一种非常简单的方法来实现。

非常感谢！

解决方法

尝试对循环使用别名以避免作用域元素。

  serviceData.servicePosts.edges.forEach(({ node: service }) => {
    const { slug } = service.fields
    actions.createPage({
      path: `/streaming-services${slug}`,component: servicePage,context: { slug: slug },})
  })

并且：

post

基本上，您要为循环项添加别名，以使其分别（分别与上一个循环不同）分别为service和{{1}}。

我建议阅读this article from David Walsh。

,

const {serviceData} =等待getServiceData（graphql）

在从serviceData返回（由graphql(返回）的对象中，

不能像没有getServiceData一样工作-它始终是一个data命名属性。

您可以重用data（如果以后不需要data，则可以使用）或在分解中使用别名：

const { data: serviceData } = await getServiceData(graphql)