Warning on build when GraphQL query is shadowed

Description

When trying to shadow a GraphQL query I am getting a warning during build process in CLI. However the project runs fine in localhost

Warning:

warn The GraphQL query in the non-page component "/path-to/project-name-leko-minim/node_module
Exported queries are only executed for Page components. It's possible you're
trying to create pages in your gatsby-node.js and that's failing for some
reason.

If the failing component(s) is a regular component and not intended to be a page
component, you generally want to use a <StaticQuery> (https://gatsbyjs.org/docs/static-query)
instead of exporting a page query.

If you're more experienced with GraphQL, you can also export GraphQL
fragments from components and compose the fragments in the Page component

$ gatsby develop
success open and validate gatsby-configs - 0.146s
success load plugins - 2.116s
warn The Google Analytics plugin requires a tracking ID. Did you mean to add it?
success onPreInit - 0.020s
success initialize cache - 0.015s
success copy gatsby files - 0.070s
success onPreBootstrap - 0.021s
success createSchemaCustomization - 0.009s
success source and transform nodes - 1.639s
success building schema - 0.372s
success createPages - 0.093s
success createPagesStatefully - 0.067s
success onPreExtractQueries - 0.003s
success update schema - 0.078s
success extract queries from components - 0.473s
warn The GraphQL query in the non-page component
Exported queries are only executed for Page components. It's possible you're
trying to create pages in your gatsby-node.js and that's failing for some
reason.

If the failing component(s) is a regular component and not intended to be a page
component, you generally want to use a <StaticQuery> (https://gatsbyjs.org/docs/static-query)
instead of exporting a page query.

If you're more experienced with GraphQL, you can also export GraphQL
fragments from components and compose the fragments in the Page component
query and pass data down into the child component — https://graphql.org/learn/queries/#fragments
success write out requires - 0.054s
success write out redirect data - 0.006s
success Build manifest and related icons - 0.009s
success onPostBootstrap - 0.043s
⠀
info bootstrap finished - 9.327 s
⠀
success run queries - 1.624s - 15/15 9.23/s
success Generating image thumbnails - 12.219s - 7/7 0.57/s
⠀
You can now view minimal-blog in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 22.694s

E.g. Shadowed File /path-to/project-name-leko-minim/src/@lekoarts/gatsby-theme-minimal-blog-core/templates/page-query.tsx:

import { graphql } from "gatsby";
import PageComponent from "@lekoarts/gatsby-theme-minimal-blog-core/src/components/page";

export default PageComponent;

export const query = graphql`
  query($slug: String!) {
    page(slug: { eq: $slug }) {
      title      
      slug
      excerpt
      body
    }
  }  
`;

Steps to reproduce

Reproduce repo- https://github.com/LekoArts/minimal-blog-additional-field

• $ git clone https://github.com/LekoArts/minimal-blog-additional-field.git
• $ cd minimal-blog-additional-field
• $ npm i
• $ gatsby develop

Expected result

There should be no warning message

Actual result

Build should be successful without any warning

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

  System:
    OS: Linux 4.15 Ubuntu 18    
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 11.14.0 - ~/.nvm/versions/node/v11.14.0/bin/node
    Yarn: 1.21.1 - /usr/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v11.14.0/bin/npm
  Languages:
    Python: 2.7.17 - /usr/bin/python
  Browsers:
    Chrome: 81.0.4044.129
    Firefox: 75.0
  npmPackages:
    gatsby: ^2.13.3 => 2.20.22 
    gatsby-plugin-google-analytics: ^2.1.4 => 2.2.2 
    gatsby-plugin-manifest: ^2.2.3 => 2.3.3 
    gatsby-plugin-netlify: ^2.1.3 => 2.2.1 
    gatsby-plugin-offline: ^2.2.4 => 2.2.10 
    gatsby-plugin-sitemap: ^2.2.19 => 2.3.2 
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.8 => 1.1.8 
  npmGlobalPackages:
    gatsby-cli: 2.12.0

[seichris]

Getting the same error 😕

[haberdashPI]

Thanks @laurenskling, that is a helpful observation. This issue has been causing me some confusion when trying to shadow a file that makes a call to useStaticQuery, which then errors because Gatsby complains about multiple root queries.

Am I to understand that the only workaround at this point is to replace the shadowed theme with your own, forked version of a theme?

I imagine a thorough reading of the documentation might reveal this limitation, but it seems worth highlighting in the documentation clearly.

For instance, in section about shadowing themes to say something like “Note: shadowing does not prevent Gatsby from scraping graphql queries from the original file, so if you want to change the behavior of a file that contains a top level query, you will have to fork rather than shadow the theme”.