Gatsby: StaticQuery fails if not inlined in built websites

Created on 4 Oct 2018 · 16Comments · Source: gatsbyjs/gatsby

Description

When you don't inline the query for a StaticQuery and run gatsby build and open the corresponding website, the site breaks and just displays Loading (StaticQuery) forever.

Steps to reproduce

In my example. I saved the query to a variable and passed that variable to the query prop.

// in NavigationMenu
export const SocialBarQuery = graphql`
  fragment SocialMediaFragment on Query {
    site {
      siteMetadata {
        twitter
        github
        medium
        steem
        linkedIn
      }
    }
  }
`

// in layout.js
const MainTemplateQuery = graphql`
      query MainTemplateQuery {
        ...SocialMediaFragment
      }
    `

// in render
      <StaticQuery query={MainTemplateQuery}
        render={data => (
          <section>
            <NavigationMenu data={data} />
          </section>
        )}
      />

Make sure to run it with gatsby build, I did not have this issue while developing with _gatsby develop_.

As soon as you inline the query, it works:

      <StaticQuery query={ graphql`
      query MainTemplateQuery {
        ...SocialMediaFragment
      }
    `}
        render={data => (
          <section>
            <NavigationMenu data={data} />
          </section>
        )}
      />

Expected result

The website should work.

Actual result

The website shows Loading (StaticQuery) forever.

Environment

  System:
    OS: Windows 10
  Binaries:
    npm: 5.3.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    gatsby: ^2.0.18 => 2.0.18
    gatsby-link: ^2.0.4 => 2.0.4
    gatsby-plugin-feed: ^2.0.6 => 2.0.6
    gatsby-plugin-glamor: ^2.0.5 => 2.0.5
    gatsby-plugin-google-analytics: ^2.0.6 => 2.0.6
    gatsby-plugin-offline: ^2.0.5 => 2.0.5
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0
    gatsby-plugin-sharp: ^2.0.6 => 2.0.6
    gatsby-remark-copy-linked-files: ^2.0.5 => 2.0.5
    gatsby-remark-images: ^2.0.3 => 2.0.3
    gatsby-remark-prismjs: ^3.0.1 => 3.0.1
    gatsby-remark-responsive-iframe: ^2.0.5 => 2.0.5
    gatsby-remark-smartypants: ^2.0.5 => 2.0.5
    gatsby-source-filesystem: ^2.0.1 => 2.0.1
    gatsby-transformer-remark: ^2.1.6 => 2.1.6
    gatsby-transformer-sharp: ^2.1.3 => 2.1.3

error The system cannot find the path specified.

  Error: The system cannot find the path specified.

  - envinfo.js:1 Function.e.exports.sync
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:7778
...

stale? needs more info needs reproduction

Source

MrToph

👍5

All 16 comments

@MrToph thanks for the reproduction steps! This definitely does seem like an issue at first glance.

Would you be able to create a reproduction (i.e. basically a repo encapsulating the changes you describe) for us? It'll help us test this out ourselves much more effectively and also _test_ the fix presuming that's needed :)

If not, we can and will still check this out, just helps us be a little more efficient!

DSchau on 4 Oct 2018

Just ran into this issue as well after upgrading from v1 to v2. Everything looked good using gatsby develop, but gatsby build displayed "Loading (Static Query)". The inlining workaround described above worked for me.

mdalzell on 22 Oct 2018

I can confirm that starting directly without migration also causes this issue.

Inlining the quieres patches the problem for now 👌

PS: I was creating a reproduction sandbox while I've found this post https://codesandbox.io/s/n4pp9qyxkj

sigmasoldi3r on 21 Nov 2018

I was having similar issues with the StaticQueries not rendering properly. It might have to do with trying to export the variable with the query. I still have the const variables, but they're just no longer being exported.

MarkH817 on 30 Nov 2018

👍1

I have the same issue and in my case, inlining the queries does not seem to help. The problem only appears with gatsby build.

dsebastien on 18 Jan 2019

👍1

@dsebastien I had the same as you, then I upgraded Gatsby (2.0.76 today) and I have the issue with the in-line hack working.

@sigmasoldi3r that sandbox wasn't working for me, I forked it and the issue isn't occurring there atm https://codesandbox.io/s/r093l30xx4 (careful with this fork as it uses gatsby serve so it does not have hot reload). But the issue is occurring on my machine.

$ npx gatsby info --clipboard

System:
  OS: Linux 4.20 Fedora 29 (Workstation Edition) 29 (Workstation Edition)
  CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
  Shell: 5.6.2 - /bin/zsh
Binaries:
  Node: 10.15.1 - /usr/bin/node
  Yarn: 1.13.0 - /usr/bin/yarn
  npm: 6.6.0 - ~/.npm-packages/bin/npm
Languages:
  Python: 2.7.15 - /home/nelson/.pyenv/shims/python
Browsers:
  Chrome: 72.0.3626.81
  Firefox: 65.0
npmPackages:
  gatsby: ^2.0.76 => 2.0.118 
  gatsby-image: ^2.0.26 => 2.0.26 
  gatsby-plugin-google-analytics: ^2.0.9 => 2.0.9 
  gatsby-plugin-manifest: ^2.0.13 => 2.0.13 
  gatsby-plugin-netlify: ^2.0.6 => 2.0.6 
  gatsby-plugin-offline: ^2.0.21 => 2.0.21 
  gatsby-plugin-react-helmet: ^3.0.5 => 3.0.5 
  gatsby-plugin-robots-txt: ^1.3.0 => 1.3.0 
  gatsby-plugin-sharp: ^2.0.17 => 2.0.17 
  gatsby-plugin-sitemap: ^2.0.4 => 2.0.4 
  gatsby-source-filesystem: ^2.0.16 => 2.0.16 
  gatsby-transformer-sharp: ^2.1.10 => 2.1.10 
npmGlobalPackages:
  gatsby-cli: 2.4.8

n-batalha on 11 Feb 2019

I've had the same issue, being able to "solve" it by inlining the query. thanks everyone for sharing. This bug is sneaky, as everything seems fine while running in the development environment.

ovbm on 11 Feb 2019

👍1

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] on 4 Mar 2019

Ping for issue to remain open.

n-batalha on 5 Mar 2019

I also have this issue on Gatsby 2.7.5. I was using the useStaticQuery react hook.

Not exporting the query as suggested by @MarkH817 didn't work.
Inlining the query into my hook as in const data = useStaticQuery(graphql` ... `) didn't work either.
But inlining my query and switching to the StaticQuery HoC did the trick.

I hope this gets fixed soon!

whmountains on 29 May 2019

@whmountains could you supply a reproduction?

What exactly didn't work?

DSchau on 29 May 2019

Yes, I can definitely supply a reproduction, though it won't be particularly minimal. See https://gitlab.com/wtdt/website. Commit 5ff9496aba19a7da2751dff9fda0f427b953f129 manifests the issue. The next commit (b262fda8d92da8ac4b0ecd029d1c3fc48bd168eb) is a bit noisy, but it fixes the problem.

You should be able to build and run it without issues. There will be a missing prismic api token, but I don't believe that it's needed to test the build.

The exact symptoms were errors being thrown in src/components/Header.js about data being undefined. But once I got rid of the GraphQL in Header the next page section started throwing errors. So I am pretty sure useStaticQuery isn't working at all in the production build.

Thank you for taking a look at this!

whmountains on 29 May 2019

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!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

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

gatsbot[bot] on 25 Sep 2019

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] on 6 Oct 2019

So... it is fixed?

sigmasoldi3r on 6 Feb 2020

@sigmasoldi3r I ran into the same issue. I found that @whmountains used Prismic in his setup (like me) and I started to debug against issue with this plugin. Turned out, that when I disabled gatsby-source-prismic-graphql (and all graphql queries related to prismic) it started to work correctly.

So, I found an issue related to gatsby-source-prismic-graphql - it seems that this plugin somehow breaks useStaticQuery hook. Didn't have time to dig into that yet, but it doesn't seem to be problem with Gatsby tough.

https://github.com/birkir/gatsby-source-prismic-graphql/issues/101