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

Question

我添加了一个与 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,    })  }}//Blogasync 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.jsconst { 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,    })  }}async function getBlogData(graphql) {  return await graphql(`    {      blogPosts: allMarkdownRemark(        filter: { frontmatter: { template: { eq: "articlepost" } } }      ) {        edges {          node {            fields {              slug            }          }        }      }    }  `)}正如您所看到的，我在 config.yml 中添加了一个模板类型，该模板类型现在显示在我的 frontmatter 中以分隔我的帖子，但我认为这可能让我更加困惑。从 frontmatter 中删除模板类型完全没问题，但确实需要一种非常简单的方法才能实现这一点。

Answer 1

尝试为循环添加别名以避免作用域元素。

  const { data } = await getBlogData(graphql)

  data.blogPosts.edges.forEach(({ node: post }) => {

    const { slug } = post.fields

    actions.createPage({

      path: `/articles${slug}`,

      component: blogPage,

      context: { slug: slug },

    })

  })

和：

  serviceData.servicePosts.edges.forEach(({ node: service }) => {

    const { slug } = service.fields

    actions.createPage({

      path: `/streaming-services${slug}`,

      component: servicePage,

      context: { slug: slug },

    })

  })

post基本上，您为循环项设置别名，以使它们分别为和 是唯一的（与之前的循环不同）service。

Answer 2

const { serviceData } = 等待 getServiceData(graphql)

不起作用，因为没有从（返回）serviceData返回的对象中- 它始终是一个命名属性。graphql(getServiceDatadata

您可以在解构中重用data（如果之前data不需要）或使用别名：

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