useStaticQuery hook broken

[matthewlein]

(moved from https://github.com/birkir/gatsby-source-prismic-graphql/issues/70, which appears to be a separate issue)

3.4.0-beta.1 (and beta.2) seem to break the static query hook.

TypeError: Cannot read property 'siteMetadata' of undefined

Which I believe is coming from data.site.siteMetadata.title in src/components/layout.js

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title} />
    </>
  )
}

Here is a basic repo that reproduces it https://github.com/matthewlein/prismic-gatsby-errors

My changes were:

1. Create a fresh build from the gatsby-cli,
2. Add the prismic graphql source
3. Add a template

which you can see all here: matthewlein/prismic-gatsby-errors@5ad2ef9

[matthewlein]

Also worth noting that this only happens in gatsby prod builds npm run build && npm run serve

[arthur-nesterenko]

I have the same issue. anybody know how to solve it?

[greatwitenorth]

Using the component version of StaticQuery fixed this for me.

[arthur-nesterenko]

I found this https://www.gatsbyjs.org/packages/gatsby-source-prismic-graphql/#usestaticquery useStaticQuery - No support yet.

[matthewlein]

@arthur-nesterenko I saw that as well, but I assumed it would just not work for prismic sources, not that it would break staticQuery everywhere. At very least this ticket can serve as a warning and tracking for when staticQuery is supported.

[imjasonmiller]

I'm experiencing the same.

For some reason, the following repository I found does seem to build while using useStaticQuery() and gatsby-source-prismic-graphql@3.4.0-beta.1. It uses older versions of certain packages, so I'll try to setup a similar repository.

[xndyz]

The annoying thing with this is that it also breaks useStaticQuery in other places, that are not querying prismic. Makes this plugin un-usable for many folks.

[ikisoft]

This is really a big issue. As much as I'd love to use this plugin these issues make it un-usable.

[nickmcmillan]

I'd love to see this issue resolved. In the meantime this is how I'm getting around it with StaticQuery, as suggested by @greatwitenorth above.

import React from 'react'
import { StaticQuery, graphql } from 'gatsby'

const MyComponent = ({ data }) => {
  const {
    title
  } = data

  return (
    <div>{title}</div>
  )
}

const query = graphql`
  {
    prismic {
      allGlobals {
        edges {
          node {
            title
          }
        }
      }
    }
  }
`

export default props => (
  <StaticQuery
    query={`${query}`}
    render={data => <MyComponent data={data.prismic.allGlobals.edges[0].node} {...props} />}
  />
)

[Rutulpatel7077]

what is the solution for this issue? It broke almost all the useStaticQuery of the site.

[pierrenel]

@Rutulpatel7077 I gave up :(

[tylermcrobert]

@Rutulpatel7077 I gave up :(

I did too. I'm wondering about the state of this plugin given that there are 61 open issues and 11 PRs

[Rutulpatel7077]

@pierrenel @tylermcrobert What different approach you have used? It seems really odd that the main plugin does not work.

[tylermcrobert]

@Rutulpatel7077 @pierrenel To be honest with you I just rewrote my app in Next.js.

They have a RFC open right now for SSG capabilities so I'm hoping I'll be able to take advantage of that. As much as I love gatsby, I just can't reliably use it with Prismic at this moment.

[Rutulpatel7077]

@tylermcrobert True. now it seems prismic plugin will not suite properly.

[pierrenel]

@tylermcrobert @Rutulpatel7077 I switched the Sanity.io - got the live preview stuff working in a few minutes vs the DAYS I wasted trying to get it to work on Prismic. Prismic is great, I love the slices etc etc, but live preview is a no go.

[Rutulpatel7077]

Correct! This issue will also make us use something else other than Prismic.

[arnaudlewis]

Hi, I will take a look this week to get to the bottom of this. I'll keep you updated on this thread.

[TimFletcher]

Ooof. I chose a Gatsby / Prismic / Netlify stack for a large client after doing a number of projects with Rails / Contentful / Heroku. I was really excited about this choice - using React / GraphQL which I have a lot of experience with.

I originally chose https://github.com/angeloashmore/gatsby-source-prismic but I need ref support so I migrated to gatsby-source-prismic-graphql as there wasn't any other choice. I got stung badly by this issue.

There is so much promise with Gatsby / Prismic. It seems the perfect stack but this, and a raft of other issues, means I will be reluctant to use it on commercial projects in the future.

[arnaudlewis]

Hi guys, actually the issue is tricky because gatsby uses Babel to transform the code at build time and replace all the queries at the component level by an ID and keep a reference only. To be able to keep this simple way of building pages and be able to keep the query to run the previews, Birkir had to overwrite the implementation of this Babel transformer to expose both this reference and the query itself. Gatsby has changed and it had created an issue because the Babel transformer needs some changes. We are actively looking for a solution that will allow you to keep building pages as simple components without running into this kind of issue. In the meantime, as a workaround you can avoid using the hook for static queries and I’ll keep you posted about this.

[MarcMcIntosh]

Hi @matthewlein

You can use this fork for the time being until a fix on another plugin is merged. https://github.com/prismicio/gatsby-source-prismic-graphql/tree/flat/babel-plugin-remove-graphql-queries npm install --save prismicio/gatsby-source-prismic-graphql#flat Then check the package.json so that gatsby-source-prismic-graphql is only there one time And finaly runnpm dedupe

[matthewlein]

@MarcMcIntosh Sweet thanks for the update. Apparently I'm in the minority here, but I'm actually totally fine with suboptimal/hacky workarounds for the moment 😅. Let me know when its all set and published on npm somewhere and I'll give it a try.

npm install --save prismicio/babel-plugin-remove-graphql does not work right now

npm ERR! Error while executing:
npm ERR! /usr/local/bin/git ls-remote -h -t ssh://git@github.com/prismicio/babel-plugin-remove-graphql.git
npm ERR! 
npm ERR! ERROR: Repository not found.

[MarcMcIntosh]

Hi @matthewlein Sorry I put in the wrong install command it should be npm install --save prismicio/gatsby-source-prismic-graphql#flat Here's the branch :) https://github.com/prismicio/gatsby-source-prismic-graphql/tree/flat

[matthewlein]

🎉confirmed no errors on my tester project! 🎉

[codingwithchris]

I am having the exact same issue as described by multiple others above. I was pulling my hair out because everything works perfectly in development, but my production build was totally broken because all of my instances of useStaticQuery were returning undefined on page load :/

gatsby info at the time of the errors was as follows:

 System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.13.0 - ~/.nvm/versions/node/v13.13.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v13.13.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 81.0.4044.122
    Firefox: 72.0.1
    Safari: 13.1
  npmPackages:
    gatsby: ^2.20.36 => 2.20.36
    gatsby-image: ^2.3.5 => 2.3.5
    gatsby-plugin-manifest: ^2.3.7 => 2.3.7
    gatsby-plugin-module-resolver: ^1.0.3 => 1.0.3
    gatsby-plugin-offline: ^3.1.5 => 3.1.5
    gatsby-plugin-react-helmet: ^3.2.5 => 3.2.5
    gatsby-plugin-robots-txt: ^1.5.0 => 1.5.0
    gatsby-plugin-sharp: ^2.5.7 => 2.5.7
    gatsby-plugin-sitemap: ^2.3.6 => 2.3.6
    gatsby-plugin-styled-components: ^3.2.4 => 3.2.4
    gatsby-plugin-typescript: ^2.3.5 => 2.3.5
    gatsby-source-filesystem: ^2.2.5 => 2.2.5
    gatsby-source-prismic-graphql: ^3.50 => 3.5.0
    gatsby-transformer-sharp: ^2.4.7 => 2.4.7
  npmGlobalPackages:
    gatsby-cli: 2.11.15

This issue is among many other bugs like issue #162 that are making me really really frustrated with this plugin. There are too many hacky workarounds on multiple different fronts for my liking.

I tried the fix provided by @MarcMcIntosh and it is working locally with gatsby build && gatsby serve, but when I deployed to Netlify (after clearing the build cache), I got the following error:

9:04:03 PM: failed Building production JavaScript and CSS bundles - 25.196s
9:04:03 PM: error Generating JavaScript bundles failed
9:04:03 PM: Can't resolve 'lodash/clonedeep' in '/opt/build/repo/node_modules/gatsby-source-prismic-graphql/components'
9:04:03 PM: not finished run queries - 25.397s
9:04:03 PM: error Command failed with exit code 1.

So... no dice for me 😢

I'm wondering if this plugin is really even being supported anymore with the very low commit volume, the large number of unaddressed Issues and the number of open, but unreviewed, Pull Requests.

I really like Prismic, but my dev experience thus far makes me feel like this plugin is definitely not production worthy, especially not for client work. I'll be moving to another alternative to Prismic for future Gatsby projects and may even need to migrate to a different CMS ASAP.

[madeleineostoja]

@codingwithchris FWIW I've gone back to the non-graphQL source, gatsby-source-prismic because of all of the issues you mentioned. It's actively maintained and afaik useStaticQuery works fine. I'm also chatting with the maintainer now about possibly using Prismic's graphQL API to avoid needing to supply your own schemas

[codingwithchris]

@seaneking I'm probably going to go this route as well at this point. It's definitely a bummer that you have to manually update schema changes though. Auto-generated schemas would be a huge plus! Other than that, migrating seems really simple. Thanks for the rec.

[Rutulpatel7077]

@codingwithchris Originally they had it auto-generate schemas but they changed it and I believe, the manually updates schema will give you guarantee that your query will not break anyhow even stuff messes up in Prismic. Moreover, it will give you the good version control of the schemas as well which Prismic does not provide.

[Danm72]

This is becoming a dealbreaker for us, is this getting any attention from the team?

[Duaner]

@Danm72 yes this is getting attention from the team. as you might have missed this message, @MarcMcIntosh provided a fix and a new version of the gatsby-source-graphql-universal was released. We now just need to update the dependency of this plugin and it should be fixed.

As a part of making this more stable in the future, we also made a pull Request to gatsby in order to have this supported directly in the core project. https://github.com/gatsbyjs/gatsby/pull/23423

[Danm72]

Awesome thanks for the response, much appreciated.

Do you have an ETA on when that update will happen?

[birkir]

👋 It's on its way! Will be releasing within the next hour

[veloce]

Can confirm it's fixed in version 3.6.0.

[nikpl7777]

Still facing the issue on plugin version 3.6.2 :(

[juanpasolano]

Unfortunately, it is still broken for me too. But now data seems to be just the query

[veloce]

What version of gatsby are you using? I tested with 2.15.9 and 2.21.22 and it works in both.

[MarcMcIntosh]

Hi @nikpl7777 and @juanpasolano Do have more information on the error?