Gatsby-node中基于多GraphQL查询提取uid创建页面的方法

你的代码存在四个核心问题：

• 仅遍历了allPrismicLastPosts数据源，遗漏了allPrismicMainBlogs下的所有文章uid
• uid取值路径错误：根据返回结构，uid是document字段的直接属性，不存在document.data.uid这个路径
• 传入context的id是外层聚合节点的id，不是单篇文章的标识，模板页无法正确匹配对应文章内容
• 没有做重复值校验和空值容错，遇到重复uid或者空字段时会直接导致构建失败

修正后完整代码 #

将gatsby-node.js中的页面创建逻辑替换为以下内容：

const path = require('path')

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const postTemplate = path.resolve(__dirname, 'src/templates/post.js')

  // 原有GraphQL查询保持不变
  const pageQueryResult = await graphql(`
    {
      allPrismicLastPosts {
        nodes {
          data {
            blogs {
              blog {
                document {
                  ... on PrismicBlog {
                    uid
                  }
                  ... on PrismicCulture {
                    uid
                  }
                }
              }
            }
          }
        }
      }
      allPrismicMainBlogs {
        nodes {
          data {
            blogs {
              blog {
                document {
                  ... on PrismicBlogMain {
                    uid
                  }
                }
              }
            }
          }
        }
      }
    }
  `)

  if (pageQueryResult.errors) throw pageQueryResult.errors

  // 用Set存储uid自动去重，避免重复创建页面报错
  const validPostUids = new Set()

  // 处理allPrismicLastPosts下的所有文章
  pageQueryResult.data.allPrismicLastPosts.nodes.forEach(sectionNode => {
    sectionNode.data?.blogs?.forEach(articleItem => {
      const postUid = articleItem.blog?.document?.uid
      if (postUid) validPostUids.add(postUid)
    })
  })

  // 补充处理allPrismicMainBlogs下的所有文章
  pageQueryResult.data.allPrismicMainBlogs.nodes.forEach(sectionNode => {
    sectionNode.data?.blogs?.forEach(articleItem => {
      const postUid = articleItem.blog?.document?.uid
      if (postUid) validPostUids.add(postUid)
    })
  })

  // 遍历所有有效uid创建页面
  validPostUids.forEach(uid => {
    createPage({
      // 路径规则可根据自身需求调整，示例为/posts/[uid]格式
      path: `/posts/${uid}`,
      component: postTemplate,
      context: {
        // 将uid传入上下文，模板页可直接用该参数查询对应Prismic文档
        uid
      }
    })
  })
}

关键修改点说明 #

• 新增了allPrismicMainBlogs数据源的遍历逻辑，覆盖所有返回的文章条目
• 修正uid取值路径为articleItem.blog.document.uid，和GraphQL返回结构保持一致
• 加入可选链?.做空值容错，避免个别字段为空时中断整个构建流程
• 使用Set结构自动去重，防止跨数据源出现重复uid时引发构建错误
• 调整context传值，直接传入文章uid作为模板查询参数，替代原来错误的外层节点id
• 新增查询错误抛出逻辑，GraphQL查询出错时可以直接在构建日志中看到明确报错

如果需要区分不同文章类型生成不同路径（比如文化类文章走/culture/[uid]、主博客走/blog/[uid]），可以在提取uid时同步记录文档的__typename字段，按类型匹配不同路径规则和模板即可，核心遍历逻辑不变。

内容的提问来源于stack exchange，提问作者Jaacoubi