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

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® Core™ i5-2500K CPU @ 3.30GHz Binaries: Node: 12.10.0 - C:\Program Files\nodejs\node.EXE npm: 6.10.3 - C:\Program Files\nodejs\npm.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]

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!

[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.