Gatsby: Page templates returning "The GraphQL query in the non-page component"

Created on 26 Feb 2019  ·  4Comments  ·  Source: gatsbyjs/gatsby

Description

I'm trying to create a number of post templates dependent of a field in the front matter, so if the front matter is "product: motorbike" it uses the "motorbike-post.js" template. If it is "product: event" it uses the "event-post.js" template. I believe I've set it up correctly but it seems not as I keept getting a fairly long error message with multiple parts including "Page not found" for most blog posts, "The GraphQL query in the non-page component" and "TypeError: Cannot read property 'node' of undefined"

Steps to reproduce

Compile project to see warnings/errors. navigate to /motorbikes or /scooters or /events and click an item. This returns a 404 page where a "blog" post should appear.

Repo:
https://github.com/Fazyyy/Trago2Wheels

Expected result

Motorbike and scooter md files should be displayed using the motorbike-post.js. Event files should be displayed using the events-post.js template.

Actual result

`success open and validate gatsby-configs — 0.029 s
success load plugins — 0.661 s
success onPreInit — 13.367 s
success delete html and css files from previous builds — 0.344 s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's not any stale
data
success initialize cache — 0.395 s
success copy gatsby files — 1.188 s
success onPreBootstrap — 0.013 s
success source and transform nodes — 0.511 s
success building schema — 1.661 s
error gatsby-node.js returned an error

TypeError: Cannot read property 'node' of undefined

  • gatsby-node.js:35 result.data.allMarkdownRemark.edges.forEach
    A:/Trago2Wheels/gatsby-node.js:35:17

  • Array.forEach

  • gatsby-node.js:33 graphql.then.result
    A:/Trago2Wheels/gatsby-node.js:33:41

  • util.js:16 tryCatcher
    [npm]/[gatsby-cli]/[bluebird]/js/release/util.js:16:23

  • promise.js:512 Promise._settlePromiseFromHandler
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:512:31

  • promise.js:569 Promise._settlePromise
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:569:18

  • promise.js:614 Promise._settlePromise0
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10

  • promise.js:694 Promise._settlePromises
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:694:18

  • promise.js:638 Promise._fulfill
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:638:18

  • promise.js:432 Promise._resolveCallback
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:432:57

  • promise.js:524 Promise._settlePromiseFromHandler
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:524:17

  • promise.js:569 Promise._settlePromise
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:569:18

  • promise.js:614 Promise._settlePromise0
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10

  • promise.js:694 Promise._settlePromises
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:694:18

  • promise.js:638 Promise._fulfill
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:638:18

  • promise.js:582 Promise._settlePromise
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:582:21

  • promise.js:614 Promise._settlePromise0
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10

  • promise.js:694 Promise._settlePromises
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:694:18

  • promise.js:638 Promise._fulfill
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:638:18

  • promise.js:432 Promise._resolveCallback
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:432:57

  • promise.js:524 Promise._settlePromiseFromHandler
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:524:17

  • promise.js:569 Promise._settlePromise
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:569:18

success createPages — 0.130 s
success createPagesStatefully — 0.148 s
success onPreExtractQueries — 0.049 s
success update schema — 0.248 s
warning The GraphQL query in the non-page component "A:/Trago2Wheels/src/templates/events-post.js" will not be run.
warning The GraphQL query in the non-page component "A:/Trago2Wheels/src/templates/motorbike-post.js" will not be run.
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 (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 — http://graphql.org/learn/queries/#fragments
success extract queries from components — 0.374 s
success run graphql queries — 4.732 s — 7/7 1.48 queries/second
success write out page data — 0.029 s
success write out redirect data — 0.005 s
success onPostBootstrap — 0.002 s

info bootstrap finished - 60.509 s

DONE Compiled successfully in 27402ms `

Environment

`
System:
OS: Windows 10
CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
Binaries:
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 42.17134.1.0
npmPackages:
gatsby: ^2.1.14 => 2.1.14
gatsby-image: ^2.0.29 => 2.0.29
gatsby-plugin-google-fonts: 0.0.4 => 0.0.4
gatsby-plugin-react-helmet: ^3.0.6 => 3.0.6
gatsby-plugin-sharp: ^2.0.21 => 2.0.21
gatsby-remark-copy-linked-files: ^2.0.9 => 2.0.9
gatsby-remark-images: ^3.0.4 => 3.0.4
gatsby-source-filesystem: ^2.0.21 => 2.0.21
gatsby-transformer-remark: ^2.2.5 => 2.2.5
gatsby-transformer-sharp: ^2.1.14 => 2.1.14

error The system cannot find the path specified.

Error: The system cannot find the path specified.

  • envinfo.js:1 Function.e.exports.sync
    [Trago2Wheels]/[envinfo]/dist/envinfo.js:1:4970

  • envinfo.js:1 Object.copySync
    [Trago2Wheels]/[envinfo]/dist/envinfo.js:1:66948

  • envinfo.js:1 Object.t.writeSync.e [as writeSync]
    [Trago2Wheels]/[envinfo]/dist/envinfo.js:1:48777

  • envinfo.js:1
    [Trago2Wheels]/[envinfo]/dist/envinfo.js:1:46934

  • envinfo.js:1 Promise.all.then.e
    [Trago2Wheels]/[envinfo]/dist/envinfo.js:1:46949

  • util.js:16 tryCatcher
    [Trago2Wheels]/[bluebird]/js/release/util.js:16:23

  • promise.js:512 Promise._settlePromiseFromHandler
    [Trago2Wheels]/[bluebird]/js/release/promise.js:512:31

  • promise.js:569 Promise._settlePromise
    [Trago2Wheels]/[bluebird]/js/release/promise.js:569:18

  • promise.js:614 Promise._settlePromise0
    [Trago2Wheels]/[bluebird]/js/release/promise.js:614:10

  • promise.js:694 Promise._settlePromises
    [Trago2Wheels]/[bluebird]/js/release/promise.js:694:18

  • promise.js:638 Promise._fulfill
    [Trago2Wheels]/[bluebird]/js/release/promise.js:638:18

  • promise_array.js:126 PromiseArray._resolve
    [Trago2Wheels]/[bluebird]/js/release/promise_array.js:126:19

  • promise_array.js:144 PromiseArray._promiseFulfilled
    [Trago2Wheels]/[bluebird]/js/release/promise_array.js:144:14

  • promise.js:574 Promise._settlePromise
    [Trago2Wheels]/[bluebird]/js/release/promise.js:574:26

  • promise.js:614 Promise._settlePromise0
    [Trago2Wheels]/[bluebird]/js/release/promise.js:614:10

  • promise.js:694 Promise._settlePromises
    [Trago2Wheels]/[bluebird]/js/release/promise.js:694:18

error UNHANDLED REJECTION

Error: The system cannot find the path specified.

  • envinfo.js:1 Function.e.exports.sync
    [Trago2Wheels]/[envinfo]/dist/envinfo.js:1:4970

  • envinfo.js:1 Object.copySync
    [Trago2Wheels]/[envinfo]/dist/envinfo.js:1:66948

  • envinfo.js:1 Object.t.writeSync.e [as writeSync]
    [Trago2Wheels]/[envinfo]/dist/envinfo.js:1:48777

  • envinfo.js:1
    [Trago2Wheels]/[envinfo]/dist/envinfo.js:1:46934

  • envinfo.js:1 Promise.all.then.e
    [Trago2Wheels]/[envinfo]/dist/envinfo.js:1:46949

  • util.js:16 tryCatcher
    [Trago2Wheels]/[bluebird]/js/release/util.js:16:23

  • promise.js:512 Promise._settlePromiseFromHandler
    [Trago2Wheels]/[bluebird]/js/release/promise.js:512:31

  • promise.js:569 Promise._settlePromise
    [Trago2Wheels]/[bluebird]/js/release/promise.js:569:18

  • promise.js:614 Promise._settlePromise0
    [Trago2Wheels]/[bluebird]/js/release/promise.js:614:10

  • promise.js:694 Promise._settlePromises
    [Trago2Wheels]/[bluebird]/js/release/promise.js:694:18

  • promise.js:638 Promise._fulfill
    [Trago2Wheels]/[bluebird]/js/release/promise.js:638:18

  • promise_array.js:126 PromiseArray._resolve
    [Trago2Wheels]/[bluebird]/js/release/promise_array.js:126:19

  • promise_array.js:144 PromiseArray._promiseFulfilled
    [Trago2Wheels]/[bluebird]/js/release/promise_array.js:144:14

  • promise.js:574 Promise._settlePromise
    [Trago2Wheels]/[bluebird]/js/release/promise.js:574:26

  • promise.js:614 Promise._settlePromise0
    [Trago2Wheels]/[bluebird]/js/release/promise.js:614:10

  • promise.js:694 Promise._settlePromises
    [Trago2Wheels]/[bluebird]/js/release/promise.js:694:18
    `

awaiting author response question or discussion
Source
picture Fazyyy
👍2

Most helpful comment

You get this error when template isn't used anywhere in the gatsby-node, which is a case here cause there are some errors.

You need to lead the path.resolve path with ./, so eg const postBike = path.resolve('./src/templates/motorbike-post.js').

You also have some missing fields in your graphql in gatsby-node, you should add them so that it builds. After fixing that your createPages could look smth like that:

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  const postBike = path.resolve('./src/templates/motorbike-post.js')
  const eventTemplate = path.resolve('./src/templates/events-post.js')
  return graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
            frontmatter {
              product
            }
          }
        }
      }
    }
  `).then(result => {
    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
      if ((node.frontmatter.product === 'motorbike') || ( node.frontmatter.product
=== 'scooter' )) {
        createPage({
          path: node.fields.slug,
          component: postBike,
          context: {
              slug: node.fields.slug,
          },
        })
      } else {
        createPage({
          path: node.fields.slug,
          component: eventTemplate,
          context: {
            slug: node.fields.slug,}
        })
      }
    })
  })
}
picture freiksenet on 26 Feb 2019
👍10 🎉2 ❤1

All 4 comments

You get this error when template isn't used anywhere in the gatsby-node, which is a case here cause there are some errors.

You need to lead the path.resolve path with ./, so eg const postBike = path.resolve('./src/templates/motorbike-post.js').

You also have some missing fields in your graphql in gatsby-node, you should add them so that it builds. After fixing that your createPages could look smth like that:

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  const postBike = path.resolve('./src/templates/motorbike-post.js')
  const eventTemplate = path.resolve('./src/templates/events-post.js')
  return graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
            frontmatter {
              product
            }
          }
        }
      }
    }
  `).then(result => {
    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
      if ((node.frontmatter.product === 'motorbike') || ( node.frontmatter.product
=== 'scooter' )) {
        createPage({
          path: node.fields.slug,
          component: postBike,
          context: {
              slug: node.fields.slug,
          },
        })
      } else {
        createPage({
          path: node.fields.slug,
          component: eventTemplate,
          context: {
            slug: node.fields.slug,}
        })
      }
    })
  })
}
freiksenet picture freiksenet on 26 Feb 2019
👍10 🎉2 ❤1

Note that you can also check for errors in your result object, which should give pointers towards missing fields and that sort of thing. See an example in the blog starter here.

m-allanson picture m-allanson on 26 Feb 2019
👍3

Ah, I can't believe that was all it was. Working now, thank you!

Fazyyy picture Fazyyy on 26 Feb 2019

Thanks so much @freiksenet!!! Finally got multiple page templates working 🎉

javiersuzuki picture javiersuzuki on 4 Mar 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Oppenheimer1 picture Oppenheimer1  ·  3Comments
hobochild picture hobochild  ·  3Comments
andykais picture andykais  ·  3Comments
dustinhorton picture dustinhorton  ·  3Comments
kalinchernev picture kalinchernev  ·  3Comments