正确地将第二个动态模板添加到 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,

    })

  }

}

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