Cannot read property 'node' of undefined - on build ( gatsby-source-prismic-graphql)

[nikita-seliverstov]

Hi I get this error on build: TypeError: Cannot read property 'node' of undefined const itSupportServicePlans = data.prismic.allServicess.edges[0].node.service_plan; But there is no empty fields returning in gragphQl

Query: ` query Services($lang: String, $uid: String ) { prismic { allServicess(lang: $lang, uid: $uid ) { edges { node { _meta { uid lang } pros { pros_heading pros_description } description heading choose_your_plan title service_plan { ... on PRISMIC_It_support_service_plan { guaranteed_prompt_response_header guaranteed_confidentiality_header financial_guarantee_of_confidentiality_header hourly_payment_header minimum_time_for_performing_work_in_remote_mode_header minimum_time_for_performing_work_on_site_header it_support_service_plan { financial_guarantee_of_confidentiality guaranteed_confidentiality guaranteed_prompt_response hourly_payment it_support_button it_support_monthly_price it_support_subtitle it_support_title minimum_time_for_performing_work_in_remote_mode minimum_time_for_performing_work_on_site } } } } } } }

}`

Environment System: OS: Windows 10 10.0.17134 CPU: (4) x64 Intel(R) Core(TM) i3-4150 CPU @ 3.50GHz Binaries: Node: 10.16.0 - C:\Program Files\nodejs\node.EXE npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD Languages: Python: 2.7.13 Browsers: Edge: 42.17134.1098.0 npmPackages: gatsby: ^2.20.8 => 2.20.8 gatsby-image: ^2.3.1 => 2.3.1 gatsby-node-helpers: ^0.3.0 => 0.3.0 gatsby-plugin-i18n: ^1.0.1 => 1.0.1 gatsby-plugin-manifest: ^2.3.3 => 2.3.3 gatsby-plugin-offline: ^3.1.2 => 3.1.2 gatsby-plugin-optimize-svgs: ^1.0.4 => 1.0.4 gatsby-plugin-prismic-preview: ^2.0.0 => 2.0.0 gatsby-plugin-purgecss: ^5.0.0 => 5.0.0 gatsby-plugin-react-helmet: ^3.2.1 => 3.2.1 gatsby-plugin-sharp: ^2.5.3 => 2.5.3 gatsby-plugin-sitemap: ^2.3.1 => 2.3.1 gatsby-plugin-webpack-bundle-analyzer: ^1.0.5 => 1.0.5 gatsby-source-prismic-graphql: ^3.5.0 => 3.5.0 gatsby-transformer-remark: ^2.7.1 => 2.7.1 gatsby-transformer-sharp: ^2.4.3 => 2.4.3

[pvpg]

The thing is that you need to add a validation to check if edges isn’t null before retrieving the data. So for you the solution would be to add this in the before the return of the data

const data = data.prismic.allServicess.edges.slice(0, 1).pop()

if (!data) return null

[nikita-seliverstov]

That's helped thank you very much. But could you tell me why this error happens in first place I don't have any empty documents in CMS

[noblica]

const data = data.prismic.allServicess.edges.slice(0, 1).pop()

Doing slice(0, 1).pop() is a bit redundant, but I understand now why it has to be done. .slice(0, 1) creates a new array from the edges array, and pop() gets the first element of that array. You can't just write data.prismic.allServicess.edges.pop() because that would just remove the first element of the edges array, and if you have a similar query on another page, that page will not load correctly (you'll get the Cannot read property 'node' of undefined, or a blank page).

I think this should be added to the docs to make it clearer!

[emveeoh]

Why does Webpack complain when running gatsby build, but no error in gatsby develop ?

In my case:

const Page = props => {

  const pageTitle = props.data.prismic.allPages.edges[0].node.page_title
  const content = props.data.prismic.allPages.edges[0].node.content

  return (
    <Layout>
      <RichText render={pageTitle} />
      <RichText render={content} />
    </Layout>
  )
}

No errors with gatsby develop but throws an error with gatsby build.

  25 | const Page = props => {
  26 | 
> 27 |   const pageTitle = props.data.prismic.allPages.edges[0].node.page_title
     |                                                          ^
  28 |   const content = props.data.prismic.allPages.edges[0].node.content
  29 | 
  30 |   return (

  WebpackError: TypeError: Cannot read property 'node' of undefined

[noblica]

@emveeoh Have you tried adding a data validation check before accessing the graphql data?

if (!data) {
  return null;
}