Multiple queries error in Gatsby "Multiple "root" queries found"

user_12288130 0
Viewed 2774

To create the post template through this tutorial(I'm in part 4): https://www.joaopedro.cc/blog-com-gatsby-e-react-parte-4

But when doing the "PostPage" query an error is occurring:

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 | }

I've looked at other answers to similar questions, and from what I understand it was a case sensitive issue, but from what I see, everything is looking correct.

I'm not getting out of place. :( thanks in advance!

graphql gatsby reactjs root
4 Answers

The error message here is actually quite helpful, but it doesn't take it all the way.

The issue is that you can only have a single query and you have multiple. The solution is to query for all the data you need in a single query rather than splitting it across multiple, as the error suggests.

Alas, you're trying to fetch what I imagine are two distinct data sets through the same field, which will give you another error by default. But there's an easy solution here: use aliases to de-duplicate the field name in the result.

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

I had the same error today on Gatsby. There was one page Query and one Static Query used so the message was a bit misleading.

"This can happen when you use two page/static queries in one file"

The way this was tackled was I traced down the files that were using it. One of them was present but notice it was NOT in any way active in the project. Once it was removed the alert disappeared. So, in a nutshell, even if the file is NOT used anywhere the second identical Static Query is picked up.

user_31812580

In my case it was about having identical names of two page queries in two different pages.

Here's my setup:

  • in the pages folder, I have two components - index.tsx and account.tsx
  • both these components have this page query:
export const query = graphql`
  query myquery($pathname: String) {
    myquery(page: { eq: $pathname }) {
      id
      title
      page
      description
    }
  }
`
  • I got the error mentioned in the question

So, it turned out two queries in two different files but with the same name is forbidden.

In the end, I just used two different query names in my two files - myquery and myotherquery. Voila!

user_87021370

I just ran into the same error message with a React component that only used one StaticQuery. This component was copied in from another project (where it is working without any issues).

I've looked at other answers to similar questions, and from what I understand it was a case-sensitive issue...

This helped me to solve it - turned out that both the name of the React component as well as the StaticQuery were not propper camelCased (they contained "SEO" - all capital letters).

Error message is gone after cleaning this part up. I thought I share this as I found the error message in this context confusing.

 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 | }
user_87995600
Related