Gatsby搭建博客报重复根查询、非页面组件查询不执行错误

两个异常属于同一诱因触发，不存在真的重复定义查询的情况：

• "Multiple "root" queries found: "articlesListUnique" and "articlesListUnique" 是Gatsby编译流程异常时的误报：当文件没有被识别为合法页面组件时，内部解析逻辑会重复注册同一份查询，最终抛出重复查询的错误，和你实际写了多少份查询无关。
• 移除查询名后弹出的非页面组件警告已经点明核心问题：Gatsby没有将src/pages/articles.js判定为有效的页面组件。绝大多数情况由两个原因导致：要么文件缺少默认导出的React组件（这是Gatsby判定页面的强制要求），要么本地缓存目录损坏导致识别逻辑异常。

你贴出的gatsby-config.js配置没有问题，相关插件的配置规则完全符合要求，不需要调整。

按以下顺序排查即可解决问题：

1. 补全页面组件的必要结构 #

打开src/pages/articles.js，确认文件存在默认导出的React组件，基础结构参考如下：

import React from "react"
import { graphql } from "gatsby"

// 页面组件逻辑，哪怕暂时不写内容也要保留默认导出
const ArticlesPage = ({ data }) => {
  const articles = data.allMarkdownRemark.nodes
  return (
    <div className="articles-list">
      {articles.map(article => (
        <article key={article.id}>
          <h2>{article.frontmatter.title}</h2>
          <p>{article.frontmatter.subtitle}</p>
          <time>{article.frontmatter.date}</time>
        </article>
      ))}
    </div>
  )
}

// 这行是核心，缺失就会被判定为非页面组件
export default ArticlesPage

// 页面查询写在组件导出之后即可，查询名只要全局唯一不冲突就行
export const query = graphql`
  query ArticlesList {
    allMarkdownRemark(sort: {frontmatter: {date: DESC}}) {
      nodes {
        frontmatter {
          date
          slug
          subtitle
          title
        }
        id
      }
    }
  }
`

注意：不要省略默认导出语句，哪怕你暂时只写查询、还没做页面渲染，也要导出一个返回空标签的组件占位，否则Gatsby永远不会执行文件内导出的页面查询。

2. 清除损坏的本地缓存 #

Gatsby的.cache目录存储了编译过程的临时数据，缓存损坏是出现这类无厘头报错的最常见原因。在项目根目录执行以下命令清空缓存后重启服务即可：

# 清空缓存和历史构建产物
gatsby clean
# 重新启动开发服务
npm run develop
# 用yarn的话执行 yarn develop

3. 非页面组件的备选写法 #

如果articles.js本身不是作为路由页面存在，只是一个可复用的普通组件，就不要使用导出页面查询的写法，改用useStaticQuery获取数据即可，示例：

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

const ArticlesList = () => {
  const data = useStaticQuery(graphql`
    query ArticlesListStatic {
      allMarkdownRemark(sort: {frontmatter: {date: DESC}}) {
        nodes {
          frontmatter {
            date
            slug
            subtitle
            title
          }
          id
        }
      }
    }
  `)
  const articles = data.allMarkdownRemark.nodes
  return (
    <div className="articles-list">
      {/* 文章列表渲染逻辑 */}
    </div>
  )
}

export default ArticlesList

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