Gatsby: Gatsby states dynamic page component is non-page component

[jordyvanraaij]

Description

During build Gatsby logs a warning that my dynamic page component is a non-page component, however it's not.

warning The GraphQL query in the non-page component "/src/templates/case.js" will not be run.
Exported queries are only executed for Page components. Instead of an exported
query, either co-locate a GraphQL fragment and compose that fragment into the
query (or other fragment) of the top-level page that renders this component, or
use a <StaticQuery> in this component. For more info on fragments and
composition, see http://graphql.org/learn/queries/#fragments and for more
information on <StaticQuery>, see https://next.gatsbyjs.org/docs/static-query

Steps to reproduce

Running either gatsby develop (will proceed) or gatsby build (fails build)

This is the start of the query in src/templates/case.js:

export default CaseTemplate

export const pageQuery = graphql`
  query caseQuery($slug: String!) {
    case: prismicCase(uid: { eq: $slug }) {
      content: data {
        title {
          text
        }
        client {
          text
        }

I have exactly the same setup for src/templates/blog.js and no errors whatsoever, which makes it extra weird.

Expected result

It should process it as an actual page component

Actual result

It doesn't recognise the file as being a page component. In development mode these pages will be blank until you just save the template being used. After a browser reload all the pages will work as expected.

Environment

System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.7.0 - /usr/local/bin/node
Yarn: yarn install v0.24.6
[1/4] Resolving packages...
success Already up-to-date.
Done in 1.86s. - ~/.node/bin/yarn
npm: 6.1.0 - /usr/local/bin/npm
Browsers:
Chrome: 68.0.3440.106
Firefox: 61.0.1
Safari: 11.1.2
npmPackages:
gatsby: next => 2.0.0-beta.106
gatsby-image: next => 2.0.0-beta.8
gatsby-link: next => 2.0.0-beta.22
gatsby-plugin-mailchimp: ^2.2.3 => 2.2.3
gatsby-plugin-react-helmet: next => 3.0.0-beta.4
gatsby-plugin-sharp: next => 2.0.0-beta.8
gatsby-plugin-styled-components: next => 3.0.0-beta.3
gatsby-source-prismic: ^1.0.2 => 1.0.2
gatsby-transformer-remark: next => 2.1.1-beta.6
gatsby-transformer-sharp: next => 2.1.1-beta.7
npmGlobalPackages:
gatsby-cli: 1.1.58

File contents (if changed)

gatsby-node.js:

const path = require(`path`)

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

  return new Promise((resolve, reject) => {
    graphql(
      `
        {
          allPrismicCase(limit: 1000) {
            edges {
              node {
                uid
                data {
                  title {
                    text
                  }
                  client {
                    text
                  }
                  hero {
                    localFile {
                      childImageSharp {
                        fluid(maxWidth: 2800) {
                          base64
                          tracedSVG
                          aspectRatio
                          src
                          srcSet
                          srcWebp
                          srcSetWebp
                          sizes
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      `,
    ).then(result => {
      if (result.errors) {
        console.log(result.errors)
        reject(result.errors)
      }

      const caseTemplate = path.resolve('./src/templates/case.js')
      const cases = result.data.allPrismicCase.edges

      cases.map((edge, index) => {
        const prev = index === cases.length - 1 ? null : cases[index + 1].node
        const next = index === 0 ? null : cases[index - 1].node

        return createPage({
          path: `/cases/${edge.node.uid}/`,
          component: caseTemplate,
          context: {
            slug: edge.node.uid,
            prev,
            next,
          },
        })
      })
    })

    graphql(
      `
        {
          allPrismicBlogPost(limit: 1000) {
            edges {
              node {
                uid
              }
            }
          }
        }
      `,
    ).then(result => {
      if (result.errors) {
        console.log(result.errors)
        reject(result.errors)
      }

      const blogTemplate = path.resolve('./src/templates/blog.js')
      const blogs = result.data.allPrismicBlogPost.edges

      blogs.map(edge =>
        createPage({
          path: `/blogs/${edge.node.uid}/`,
          component: blogTemplate,
          context: {
            slug: edge.node.uid,
          },
        }),
      )
    })

    resolve()
  })
}

[Chuloo]

can you send in a reproduction repo showing the error?

[jordyvanraaij]

I debugged a little more and found out that the problem is the child image sharp request in the gatsby-node file. When I remove the image, the warning is gone. I need that image however.

const path = require(`path`)

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

  return new Promise((resolve, reject) => {
    graphql(
      `
        {
          allPrismicCase(limit: 1000) {
            edges {
              node {
                uid
                data {
                  title {
                    text
                  }
                  client {
                    text
                  }
                  hero {
                    localFile {
                      childImageSharp {
                        fluid(maxWidth: 2800) {
                          base64
                          tracedSVG
                          aspectRatio
                          src
                          srcSet
                          srcWebp
                          srcSetWebp
                          sizes
                        }
                      }
                    }
                  }

[mattes3]

Today, I had the same effect. The reason was: I accessed a field in the frontmatter that I did not mention in the GraphQL query. After I added it to the query, everything worked fine without the "non-page component" message.

To debug this, I invoked gatsby using this statement:

rm -r .cache/ ; env "NODE_ENV=development" "DEBUG=gatsby:query-watcher" npm run dev

[kakadiadarpan]

Hi @jordyvanraaij, as @Chuloo suggested can you provide a reproduction repo showing the error?

[kakadiadarpan]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

[kakadiadarpan]

This issue is being closed because there hasn't been any activity for at least 30 days. Feel free to open a new one if you still experience this problem 👍

[danielberndt]

This issue is still valid. You can reproduce it in my repo.

Interestingly the warning

The GraphQL query in the non-page component ".../MdxBlogPostLayout.js" will not be run

is incorrect, as the pageQuery is executed as desired.

[pieh]

@danielberndt This warning happens because gatsby-mdx at the moment need to use some clever "hacks"/workarounds (gatsby at the moment doesn't expose enough APIs) to make it work cleanly:

It seems when you use componentWithMDXScope in your createPage function in gatsby-node.js, gatsby-mdx will create (modified?) copy of your page template in .cache directory and your page component in src isn't actually used and that's why there is this warning

@ChristopherBiscardi I guess this is known issue with gatsby-mdx/component-with-mdx-scope? Seems like we would need some kind of API to blacklist files that are being transformed to not show this confusing warning

[ChristopherBiscardi]

@pieh yes, that is what happens (we create a wrapper that imports the user's page component). @danielberndt's issue looks separate from the original filing here.

The warning is accurate (what it says is happening is actually happening) but irrelevant to MDX users (because we hoist the pageQuery and run it in a higher level wrapper).

It is a warning that causes people some confusion since it doesn't apply to MDX, but I'm not sure how we'd appropriately figure this out inside gatsby to silence the warning. On the MDX side, I'm hoping we won't need these wrappers and want to investigate better approaches like returning an MDX component from the graphql query itself, rather than wrapping entire pages, etc. This would get rid of the warning from our end. A much less palatable approach is writing a webpack loader that targets page files and removes the pageQuery for mdx wrapped page templates when loading.

[Chuloo]

Got this same issue, any fix or workaround yet? @danielberndt were you able to find a fix? also, in my case, the pageQuery didn't run at all.

[ChristopherBiscardi]

@Chuloo ran into a gatsby-mdx bug. Since the docs changed to use query named export instead of pageQuery I anticipate some other people might run into this too while I fix it.

[lexicalparadoxx]

Ran into this problem too.
It was working perfectly fine but everytime I try it now, it shows the same warning

[ChristopherBiscardi]

This btw is completely fixed in gatsby-mdx in the 0.3 line (current stable version 0.3.3), so shouldn't appear anymore related to that library

[gatsbot[bot]]

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!

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

[gatsbot[bot]]

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.

Thanks again for being part of the Gatsby community!

[gatsbot[bot]]

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.

Thanks again for being part of the Gatsby community!