Gatsby: Tutorial Part Four - 'Multiple "root" queries found'

[davidbowes818]

Description

I was following along the fourth tutorial on the GatsbyJs site where I was querying data via GraphQL. My code was copied from the snippets provided in that section.

Steps to reproduce

Here's my repo: https://github.com/davidbowes818/gatsby-four

When I run npm start I get the following on my localhost:

Expected result

The tutorial screenshots show the results from the GraphQL query being output to the page.

Actual result

There's a compiler error stating that multiple root queries are found.

I have a static query defined in my Layout component (layout.js) and a query in my About page (pages/about.js) that are both attempting to render the site metadata's title.

Environment

System:
OS: Windows 10 10.0.18362
CPU: (4) x64 Intel(R) Core(TM) i5-2500K CPU @ 3.30GHz
Binaries:
Node: 12.10.0 - C:Program Filesnodejsnode.EXE
npm: 6.10.3 - C:Program Filesnodejsnpm.CMD
Browsers:
Edge: 44.18362.449.0
npmPackages:
gatsby: ^2.19.45 => 2.19.45
gatsby-plugin-emotion: ^4.2.1 => 4.2.1
gatsby-plugin-typography: ^2.4.1 => 2.4.1
gatsby-source-filesystem: ^2.2.2 => 2.2.2

[Js-Brecht]

Your repo works fine for me.

For anonymous queries (i.e. ones that look like query { instead of query MyQuery {), Gatsby will generate a name for it which includes the path of the page it was found in, and a hash of the query itself.

Since it's finding the exact same query in the exact same place, two times over, and the fact that it works fine for me, I think there might be an issue with your cached state.

Can you try running gatsby clean, then try building again?

[davidbowes818]

Your repo works fine for me.

For anonymous queries (i.e. ones that look like query { instead of query MyQuery {), Gatsby will generate a name for it which includes the path of the page it was found in, and a hash of the query itself.

Since it's finding the exact same query in the exact same place, two times over, and the fact that it works fine for me, I think there might be an issue with your cached state.

Can you try running gatsby clean, then try building again?

Okay I ran the clean command and got the following output:

$ gatsby clean info Deleting .cache, public info Successfully deleted directories

I ran npm run start afterwards and I'm getting the same error (there's reference to some markdown files which isn't relevant to part four of the tutorial; I was just continuing with the tutorial series despite not being able to see anything on the front-end).

Compiler error:  

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

Instead of:

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

Do:

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

This can happen when you use two page/static queries in one file. Please combine those into one query.
If you're defining multiple components (each with a static query) in one file, you'll need to move each component to its own file.

File: C:/Projects/tutorial-part-four/src/pages/about.js

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

Instead of:

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

Do:

  1 | query cProjectstutorialPartFoursrcpagesindexJs2260396325AndCProjectstutorialPartFoursrcpagesindexJs2260396325 {
  2 |   allMarkdownRemark {
  3 |     #...
  4 |   }
  5 |   allMarkdownRemark {
  6 |     #...
  7 |   }
  8 | }

This can happen when you use two page/static queries in one file. Please combine those into one query.
If you're defining multiple components (each with a static query) in one file, you'll need to move each component to its own file.

File: C:/Projects/tutorial-part-four/src/pages/index.js

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

Instead of:

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

Do:

  1 | query cProjectstutorialPartFoursrcpagesmyFilesJs3953592347AndCProjectstutorialPartFoursrcpagesmyFilesJs3953592347 {
  2 |   allFile {
  3 |     #...
  4 |   }
  5 |   allFile {
  6 |     #...
  7 |   }
  8 | }

This can happen when you use two page/static queries in one file. Please combine those into one query.
If you're defining multiple components (each with a static query) in one file, you'll need to move each component to its own file.

File: C:/Projects/tutorial-part-four/src/pages/my-files.js

[Js-Brecht]

Interesting 🤔.

Can you also post the output immediately following npm run start? It should look something like this:

> npm run start

> [email protected] start D:\dev\source\gatsby\gatsby-four
> npm run develop


> [email protected] develop D:\dev\source\gatsby\gatsby-four
> gatsby develop

Also, what shell/terminal are you using? CMD? Powershell? Or something like git-bash or wsl?

[Js-Brecht]

Can you also verify that the case of every segment in your current path matches the real case on the disk?

For example, if C:\Projects\tutorial-part-four\src\pages\my-files.js is actually C:\projects\tutorial-part-four\src\pages\my-files.js (see the different in projects), then Gatsby will have a problem with it.

[davidbowes818]

Interesting 🤔.

Can you also post the output immediately following npm run start? It should look something like this:

> npm run start

> [email protected] start D:\dev\source\gatsby\gatsby-four
> npm run develop


> [email protected] develop D:\dev\source\gatsby\gatsby-four
> gatsby develop

Also, what shell/terminal are you using? CMD? Powershell? Or something like git-bash or wsl?

When I run npm run start I get:

`> npm run develop

[email protected] develop C:projectstutorial-part-four
gatsby develop`

And I'm using git-bash as my integrated terminal in VS Code.

[Js-Brecht]

I think VS Code has been started with the wrong path name. According to Gatsby, the path of your files is C:/Projects/tutorial-part-four/src/pages/my-files.js (Projects is capitalized). Meanwhile, npm run start is using the path C:\projects\tutorial-part-four (lowercase "p" in projects).

Do you also have output that looks like this?

warn The plugin "dev-404-page" created a page with a component path that doesn't match the casing of the actual file. This may work locally, but will break on systems which
are case-sensitive, e.g. most CI/CD pipelines.

page.component:     "D:/Dev/source/gatsby/gatsby-four/.cache/dev-404-page.js"
path in filesystem: "D:/dev/source/gatsby/gatsby-four/.cache/dev-404-page.js"
warn The plugin "gatsby-plugin-page-creator" created a page with a component path that doesn't match the casing of the actual file. This may work locally, but will break on 
systems which are case-sensitive, e.g. most CI/CD pipelines.

page.component:     "D:/Dev/source/gatsby/gatsby-four/src/pages/about.js"
path in filesystem: "D:/dev/source/gatsby/gatsby-four/src/pages/about.js"
warn The plugin "gatsby-plugin-page-creator" created a page with a component path that doesn't match the casing of the actual file. This may work locally, but will break on 
systems which are case-sensitive, e.g. most CI/CD pipelines.

page.component:     "D:/Dev/source/gatsby/gatsby-four/src/pages/index.js"
path in filesystem: "D:/dev/source/gatsby/gatsby-four/src/pages/index.js"
warn The plugin "gatsby-plugin-page-creator" created a page with a component path that doesn't match the casing of the actual file. This may work locally, but will break on 
systems which are case-sensitive, e.g. most CI/CD pipelines.

page.component:     "D:/Dev/source/gatsby/gatsby-four/src/pages/my-files.js"
path in filesystem: "D:/dev/source/gatsby/gatsby-four/src/pages/my-files.js"

[davidbowes818]

I think VS Code has been started with the wrong path name. According to Gatsby, the path of your files is C:/Projects/tutorial-part-four/src/pages/my-files.js (Projects is capitalized). Meanwhile, npm run start is using the path C:\projects\tutorial-part-four (lowercase "p" in projects).

Do you also have output that looks like this?

warn The plugin "dev-404-page" created a page with a component path that doesn't match the casing of the actual file. This may work locally, but will break on systems which
are case-sensitive, e.g. most CI/CD pipelines.

page.component:     "D:/Dev/source/gatsby/gatsby-four/.cache/dev-404-page.js"
path in filesystem: "D:/dev/source/gatsby/gatsby-four/.cache/dev-404-page.js"
warn The plugin "gatsby-plugin-page-creator" created a page with a component path that doesn't match the casing of the actual file. This may work locally, but will break on 
systems which are case-sensitive, e.g. most CI/CD pipelines.

page.component:     "D:/Dev/source/gatsby/gatsby-four/src/pages/about.js"
path in filesystem: "D:/dev/source/gatsby/gatsby-four/src/pages/about.js"
warn The plugin "gatsby-plugin-page-creator" created a page with a component path that doesn't match the casing of the actual file. This may work locally, but will break on 
systems which are case-sensitive, e.g. most CI/CD pipelines.

page.component:     "D:/Dev/source/gatsby/gatsby-four/src/pages/index.js"
path in filesystem: "D:/dev/source/gatsby/gatsby-four/src/pages/index.js"
warn The plugin "gatsby-plugin-page-creator" created a page with a component path that doesn't match the casing of the actual file. This may work locally, but will break on 
systems which are case-sensitive, e.g. most CI/CD pipelines.

page.component:     "D:/Dev/source/gatsby/gatsby-four/src/pages/my-files.js"
path in filesystem: "D:/dev/source/gatsby/gatsby-four/src/pages/my-files.js"

I renamed my Projects folder to be lowercase (projects) and it seems to be working now. I didn't take into account that case sensitivity would cause any issue.

Thanks so much!

[Js-Brecht]

You're welcome.

Case sensitivity can definitely be an issue sometimes. I normally see it when somebody is moving from Windows to Linux, like when they deploy to something like Netlify (that's generally because something in their code has the wrong case, which is a bit harder to catch). I guess it's just one of the perils of working cross-platform 🙂 .

I'll go ahead and close this as resolved. Feel free to comment again if you have more questions!