Gatsby 中的多个查询错误“发现多个“根”查询”

Question

通过本教程创建帖子模板（我在第 4 部分）： https://www.joaopedro.cc/blog-com-gatsby-e-react-parte-4

但是在执行“PostPage”查询时发生错误：

Multiple "root" queries found: "PostPage" and "PostPage".
Only the first ("PostPage") will be registered.

Instead of:

1 | query PostPage {
2 |   markdownRemark {
3 |     #...
4 |   }
5 | }
6 | 
7 | query PostPage {
8 |   markdownRemark {
9 |     #...
10 |   }
11 | }

Do:

1 | query postPageAndPostPage {
2 |   markdownRemark {
3 |     #...
4 |   }
5 |   markdownRemark {
6 |     #...
7 |   }
8 | }

我查看了类似问题的其他答案，据我了解，这是一个区分大小写的问题，但据我所知，一切看起来都是正确的。

我不会出格的。 :( 提前致谢！

Answer 1

这里的错误消息实际上很有帮助，但并没有完全解决问题。

问题是您只能有一个查询，并且有多个查询。解决方案是在单个查询中查询所需的所有数据，而不是将其拆分为多个，如错误所示。

唉，你试图通过同一个字段获取我想象的两个不同的数据集，这默认会给你另一个错误。但这里有一个简单的解决方案：使用 aliases 来消除结果中重复的字段名称。

query PostPage {
  firstPost: markdownRemark {
    #...
  }
  secondPost: markdownRemark {
    #...
  }
}

Answer 2

我今天在 Gatsby 上也遇到了同样的错误。使用了一页查询和一个静态查询，因此该消息有点误导。

“当您在一个文件中使用两个页面/静态查询时可能会发生这种情况”

解决这个问题的方法是我追踪使用它的文件。其中之一在场，但请注意，它在该项目中没有以任何方式活跃。一旦删除，警报就消失了。因此，简而言之，即使该文件未在任何地方使用，也会选择第二个相同的静态查询。

Answer 3

就我而言，这是关于在两个不同页面中具有相同名称的两个页面查询。

这是我的设置：

• 在

  pages

  文件夹中，我有两个组件 -

  index.tsx

  和

  account.tsx

• 这两个组件都有此页面查询：

export const query = graphql`
  query myquery($pathname: String) {
    myquery(page: { eq: $pathname }) {
      id
      title
      page
      description
    }
  }
`

• 我收到问题中提到的错误

因此，结果是两个不同文件中的两个查询被禁止但具有相同的名称。

最后，我只是在两个文件中使用了两个不同的查询名称 -

myquery

和

myotherquery

。瞧！

Answer 4

我刚刚在一个仅使用一个 StaticQuery 的 React 组件中遇到了相同的错误消息。该组件是从另一个项目复制而来的（它正在运行，没有任何问题）。

我查看了类似问题的其他答案，据我了解，这是一个区分大小写的问题......

这帮助我解决了这个问题 - 事实证明，React 组件的名称和 StaticQuery 都不是正确的驼峰命名法（它们包含“SEO” - 全部大写字母）。

清理此部分后，错误消息消失了。我想我分享这个，因为我发现这个上下文中的错误消息令人困惑。

 ERROR #85910  GRAPHQL

Multiple "root" queries found: "SEOQuery" and "SEOQuery".
Only the first ("SEOQuery") will be registered.

Instead of:

   1 | query SEOQuery {
   2 |   site {
   3 |     #...
   4 |   }
   5 | }
   6 |
   7 | query SEOQuery {
   8 |   site {
   9 |     #...
  10 |   }
  11 | }

Do:

  1 | query seoQueryAndSeoQuery {
  2 |   site {
  3 |     #...
  4 |   }
  5 |   site {
  6 |     #...
  7 |   }
  8 | }

Answer 5

要解决此问题，只需将多个查询包装在一个查询中即可。

示例

  query images {
      img1: file(relativePath: { eq: "home/img-1.jpeg" }) {
        childImageSharp {
          fluid(maxWidth: 500) {
            ...GatsbyImageSharpFluid_tracedSVG
          }
        }
      }
      img2: file(relativePath: { eq: "home/img-2.jpeg" }) {
        childImageSharp {
          fluid(maxWidth: 500) {
            ...GatsbyImageSharpFluid_tracedSVG
          }
        }
      }
    }