Getting a TypeError in Production: Cannot read property 'home' of undefined

Developing with Prismic
1

Hey Prismic-Team,

I've exclusively used the gatsby-source-prismic plugin in so far (actually only twice so far), and switched to the gatsby-source-prismic-graphql for this (small) project.

  const data = useStaticQuery(graphql`
    query HomeQuery {
      prismic {
        home(lang: "de-de", uid: "home") {
          page_title
          body {
            ... on PRISMIC_HomeBodyFont_section {
              type
              label
              primary {
                font_name
                font_info
                buy_button_background_color
                buy_button_text_color
              }
            }
          }
        }
      }
    }
  `)

I did a really simple query to check for my function to display a simple slider:

  const fontSections = data.prismic.home && data.prismic.home.body.map((slice, index) => {
    switch (slice.type) {
      case "font_section":
        return <FontSection key={ index } input={ slice } currentSlide="01" />
    }
  })

(I know there's a default case missing).

When running my App locally, everything works fine, but as soon as I am deploying it to production (Netlify) I am getting the following console error: TypeError in Production: Cannot read property 'home' of undefined which is referring to the home in const fontSections = data.prismic.home && data.prismic.home.body.map((slice, index) => {
Why am I getting that error in production while it works totally fine locally?

Another thing that's really weird is that my design is displayed, only the simple slider does not work (just mapping over some fields and updating the z-index of a single slide on click).

Environment variables are set on Netlify, while I added them (for now) directly into my gatsby-config.js file so I guess that's not needed?!

What am I missing?

Thanks in advance

2

This is my plugin definition inside my gatsby-config.js:

(Please note I’ve changed repo names and accessTokens)

    {
      resolve: 'gatsby-source-prismic-graphql',
      options: {
        repositoryName: 'foo-bar-repo', // required
        defaultLang: 'de-de', // optional, but recommended
        accessToken: 'aoinvouah3w89najkshdg', // optional
        path: '/preview', // optional, default: /preview
        previews: true, // optional, default: false
      }
    }

I have not added my pages array / objects as the docs says they’re optional and I only have a home page/template as well as a info page/template — so there’s only some static page types inside Prismic and no need to dynamically createPages on build.

3

Hey Christian!

There are two things to note here.

The first one being that the gatsby-source-prismic-graphql plugin does not support useStaticQuery yet. You’ll need to use StaticQuery instead.

The second one could be a missing validation when saving the retrieved data, something like this:

const doc = data.prismic.home
if (!doc) return null

And then you can do the switch case.

4

Hey Paulina!

Thanks for your quick response, much appreciated.

Using the Gatsby hook instead of their older StaticQuery Component was exactly what caused the issue. Just out of curiosity — Are you planning to support useStaticQuery in the near future or does this not really work with your source plugin?

Thanks again, Best
Christian

5

Yes we do have plans on building support for useStaticQuery but there’s no ETA for the moment.

I saw that you’re not using a Pages folder to generate a URL for the homepage. Both useStaticQuery and StaticQuery are meant to be used inside components. So maybe that could be the problem? where are you rendering the Homepage?

6

Apologies for not being clear enough, everything worked fine when I switched to StaticQuery (just saw it in the docs today btw, definitely missed that).

Ok cool, cheers for letting me know, looking forward as I personally tend to prefer the hook over the component query style.

Re the pages: In that case I don’t need to generate pages (such as projects or posts) dynamically as there is only an index page and an about page (for now).
As everything works perfectly in production I thought there’s no need to specify those pages. Should I still add those to my gatsby-config.js?
The home page (as well as the about page) is simply rendered as index.js file from my pages directory.

7

Yes, in your case you don’t need to create dynamic pages to generate your content if you only have one page. The only thing that you may encounter is that you’ll need another page file if you want to generate a different URL aside from the homepage. But aside from that, you don’t need to use the dynamic page generation of the plugin, it is optional.

1 Like
8

Thank you Paulina, sry but totally missed your reply back then.

Really appreciate your help!