Gatsby报错：发现多个Root查询，重命名等操作无法解决

针对你遇到的这个报错，以下是几个可排查和解决的方向：

1. 确认模板文件位置 #

确保doc.js和page.js放在src/templates目录下，而非src/pages。Gatsby会自动把src/pages下的文件解析为独立页面，若模板文件误放在这里，可能触发查询冲突。

2. 确保查询名称全局唯一 #

Gatsby要求所有根查询的内部名称（即query关键字后的标识符）全局唯一，即使在不同文件中也不能重复。建议给查询起更具辨识度的唯一名称，避免潜在冲突：

修改后doc.js查询 #

export const docPageQuery = graphql`
  query DocTemplatePageQuery($id: String!) {
    mdx(id: { eq: $id }) {
      fields {
        pageType
        title
        editLink
      }
      tableOfContents
    }
  }
`

修改后page.js查询 #

export const pageQuery = graphql`
  query PageTemplatePageQuery($id: String!) {
    mdx(id: { eq: $id }) {
      fields {
        pageType
        title
      }
    }
  }
`

3. 彻底清理Gatsby缓存 #

手动删除缓存可能不彻底，执行官方清理命令：

gatsby clean

该命令会删除.cache和public目录，彻底清除旧的查询缓存，之后重新执行gatsby develop或gatsby build。

4. 检查gatsby-node.js的页面创建逻辑 #

确认在gatsby-node.js中调用createPage时，每个页面都正确指定了对应模板，没有重复使用模板或传递冲突的变量参数。示例逻辑如下：

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

  // 查询所有MDX文档
  const result = await graphql(`
    query {
      allMdx {
        nodes {
          id
          fields {
            pageType
          }
        }
      }
    }
  `)

  // 根据pageType分配不同模板
  result.data.allMdx.nodes.forEach(node => {
    const template = node.fields.pageType === 'doc' 
      ? './src/templates/doc.js' 
      : './src/templates/page.js'
    
    createPage({
      path: `/content/${node.id}`,
      component: template,
      context: {
        id: node.id
      }
    })
  })
}

5. 排查组件中的查询冲突 #

检查BreadcrumbExample组件是否存在错误的查询定义（比如重复的根查询），虽然静态查询通常不会和页面查询冲突，但组件中的异常查询也可能触发全局冲突。

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