Gatsby: Warning on build when GraphQL query is shadowed

Created on 4 May 2020  ·  8Comments  ·  Source: gatsbyjs/gatsby

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
not stale themes bug
Source
picture SOHELAHMED7

Most helpful comment

Getting the same error :/

picture seichris on 3 Aug 2020
👍2 😕1

All 8 comments

Can confirm I have noticed this behaviour too - my guess is that this because there are sort of two createPage processes happening. The original - which isn't actually running, and then the shadowed one which is running. Hence an empty createPage call.

ehowey picture ehowey on 5 May 2020

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

github-actions[bot] picture github-actions[bot] on 25 May 2020

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

github-actions[bot] picture github-actions[bot] on 5 Jun 2020

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

github-actions[bot] picture github-actions[bot] on 25 Jun 2020

From https://github.com/gatsbyjs/gatsby/issues/20413

Sice I use headless CMS for sourcing Gatsby I can not rely that CMS user creates always all page types for all Gatsby's templates. Thus it is common for me that some templates remain unused. I was looking for some "if" condition to prevent this warning but unsuccessfully. So currently my log is filling with this misleading information.
It would be nice to have a way how to say that unused templates can be intentional and do not printing warnings.

LekoArts picture LekoArts on 2 Jul 2020

Getting the same error :/

seichris picture seichris on 3 Aug 2020
👍2 😕1

Still getting the same error. Using Sanity as CMS and hasura

Warning:

warn The GraphQL query in the non-page component "/Users/CESARMAC/Desktop/XUP/xup/packages/webapp-lists/src/templates/list.js" will not be run.

Page Template 👍

    import  React  from  'react'

    import  { graphql }  from  'gatsby'

    import  Helmet  from  "react-helmet";

    import  SEO  from  '../components/SEO'

    import  List  from  '../features/List'



    function  ListTemplate({  data,  pageContext  })  {

    const  {  sanityListInstance:  listInstance  }  =  data

    return (

    <>

    <SEO

    title={listInstance?.list.title}

    imageSrc={listInstance?.list.image.asset.fixed.src}

    imageHeight={listInstance?.list.image.asset.fixed.height}

    imageWidth={listInstance?.list.image.asset.fixed.width}

    />

    <List

    list={listInstance}

    />

    </>

    )

    }



    export  default  ListTemplate



    export  const  pageQuery  =  graphql`

    query ListInstancesById($id: String!) {

    sanityListInstance(id: { eq: $id }) {

    customId

    activeDate {

    local

    }

    list {

    title



    _updatedAt(formatString: "MMMM Do, YYYY")

    _rawDescription(resolveReferences: { maxDepth: 10 })

    image {

    asset {

    fluid(maxHeight: 544, maxWidth: 1000) {

    ...GatsbySanityImageFluid

    }

    }

    asset {

    fixed(width: 960) {

    ...GatsbySanityImageFixed

    }

    }

    }

    experienceStop {

    place {

    ...placeFields

    }

    event {

    ...eventFields

    }

    }

    tags {

    name

    }

    listDate {

    local

    }

    }

    }

    }

    `

Gatsby Node:

const  Promise  =  require("bluebird");

const  path  =  require("path");

const  dateFns  =  require("date-fns");

const  {  addDays,  format,  endOfDay,  parseISO,  startOfDay  }  =  dateFns;

const  {  DateTime  }  =  require("luxon");



const  nodeEnv  =  process.env.NODE_ENV;



const  yearMonthDayFormat  =  "yyyy-MM-dd";



exports.createPages  =  ({  graphql,  actions  })  =>  {

const  {  createPage  }  =  actions;



return  new  Promise((resolve,  reject) => {

const  listTemplate  =  path.resolve("./src/templates/list.js");

const  listPreviewTemplate  =  path.resolve(

"./src/templates/listPreview.js"

);

const  legalDocumentTemplate  =  path.resolve("./src/templates/legal.js");

resolve(

graphql(

`

{

allSanityListInstance {

edges {

node {

id

list {

slug {

current

}

}

activeDate {

local

}

customId

}

}

}

allSanityLists {

edges {

node {

id

slug {

current

}

}

}

}

allSanityLegal {

edges {

node {

_updatedAt

title

slug {

current

}

}

}

}

}

`

).then((result) => {

if (result.errors) {

console.log(`Error! This is what happened ${result.errors}`);

reject(result.errors);

}



result.data.allSanityListInstance.edges.forEach(({  node  }) => {

node.list  &&

createPage({

path:  `/lists/${node.list.slug.current}`,

component:  listTemplate,

context: {

id:  node.id,

},

});

});



if (nodeEnv  ===  "development") {

result.data.allSanityLists.edges.forEach(({  node  }) => {

node.slug  &&

createPage({

path:  `/lists/${node.slug.current}`,

component:  listPreviewTemplate,

context: {

id:  node.id,

},

});

});

}



const  legalDocuments  =  result.data.allSanityLegal.edges;

const  formattedLegalDocuments  =  legalDocuments.map(

({  node:  document  }) => ({

...document,

path:  `/legal/${document.slug.current}/`,

})

);



formattedLegalDocuments.forEach((document) => {

createPage({

...document,

component:  legalDocumentTemplate,

context: {

title:  document.title,  // Used for query

documents:  formattedLegalDocuments,

},

});

});

})

);

});

};



exports.onCreatePage  =  ({  page,  actions  })  =>  {

const  {  createPage,  deletePage  }  =  actions;

deletePage(page);



createPage({

...page,

context: {

...page.context,

},

});

};
CesarBenavides777 picture CesarBenavides777 on 11 Aug 2020

in my experience: Gatsby scrapes all graphql calls to execute staticly. _all_. This includes original files, _and_ shadows. So while your shadowed file is the one that get run and the query is being used as the pageQuery, it has still found the original query and is still executing that query. Since it now is not a page, it will throw the non-page component error as it always does in querys that are not pages/templates/

laurenskling picture laurenskling on 4 Dec 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

OleksandrSachuk picture OleksandrSachuk  ·  75Comments
blainekasten picture blainekasten  ·  130Comments
ehowey picture ehowey  ·  97Comments
Jivings picture Jivings  ·  112Comments
antoinerousseau picture antoinerousseau  ·  139Comments