node.js - 我如何在 gatsby-node.js 中使用多个 createPage 路由

Question

我目前在 gatsby-node.js 中使用多个 createPage 路由时遇到问题。我正在尝试将 Gatsby js 与 Shopify 商业店面和另一个 CMS 一起用于博客文章，因此我需要一种在分别查看产品和查看博客文章时创建路由的方法。

目前，我遇到一个错误，该错误仅在尝试查看如下内容的产品详细信息页面时出现:

(EnsureResources, ) TypeError: 无法读取未定义的属性“页面”

我的 gatsby-node.js 目前看起来像这样

const path = require(`path`)

// Create product page urls
exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  return graphql(`
    {
      allShopifyProduct {
        edges {
          node {
            handle
          }
        }
      }
    }
  `).then(result => {
    result.data.allShopifyProduct.edges.forEach(({ node }) => {
        const id = node.handle
      createPage({
        path: `/product/${id}/`,
        component: path.resolve(`./src/templates/product-page.js`),
        context: {
            id,
        },
      })
    })
  })
}

// Create blog post slug urls
exports.createPages = async ({graphql, actions}) => {
  const {createPage} = actions
  const blogTemplate = path.resolve('./src/templates/blog.js')
  const res = await graphql (`
    query {
      allContentfulBlogPost {
        edges {
          node {
            slug
          }
        }
      }
    }
  `)

  res.data.allContentfulBlogPost.edges.forEach((edge) => {
    createPage ({
      component: blogTemplate,
      path: `/blog/${edge.node.slug}`,
      context: {
        slug: edge.node.slug
      }
    })
  })
}

Answer 1

您不能两次定义相同的 API (createPages)。在一个函数中执行，尤其是因为您可以将其全部放入一个查询中。

此代码显然未经测试，但应该可以工作:

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const result = await graphql(`
    {
      shopify: allShopifyProduct {
        nodes {
          handle
        }
      }
      contentful: allContentfulBlogPost {
        nodes {
          slug
        }
      }
    }
  `)

  const shopifyTemplate = require.resolve(`./src/templates/product-page.js`)
  const contentfulTemplate = require.resolve('./src/templates/blog.js')

  if (result.errors) {
    return
  }

  result.data.shopify.nodes.forEach(product => {
    const id = product.handle

    createPage({
      path: `/product/${id}/`,
        component: shopifyTemplate,
        context: {
            id,
        },
    })
  })

  result.data.contentful.nodes.forEach(post => {
    createPage ({
      component: contentfulTemplate,
      path: `/blog/${post.slug}`,
      context: {
        slug: post.slug
      }
    })
  })
}

nodes 是 edges.node 和有效语法的快捷方式。 shopify: 是查询名称前的别名。你不需要使用path，你也可以使用require.resolve。 async/await 语法更易于阅读 IMO。