Question

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

当前，我遇到一个错误，该错误仅在尝试查看显示以下内容的产品详细信息页面时出现：

(EnsureResources, ) TypeError: Cannot read property 'page' of undefined

我的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。异步/等待语法最好阅读IMO。

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

1 个答案: