Loading (Static Query)

[rockchalkwushock]

Description

When using the new <StaticQuery /> api I am continually receiving the Loading (Static Query) message.

Steps to reproduce

// layout.js

const Layout = ({ children }) => <div>{children}</div>

// HomePage.js

export default () => (
  <Layout>
     <StaticQuery
       query={graphql`
         query HomePage {
           site {
             siteMetadata {
               author
             }
           }
         }`
        }
        render={data => <h1>{data.site.siteMetadata.author}</h1>}
     />
  </Layout>
)

// gatsby-config.js

module.exports = {
  siteMetadata: {
    author: 'Cody Brunner'
  }
}

Expected result

I would expect an h1 to be returned with my name in the browser.

Actual result

I received Loading (Static Query)

Environment

  System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.11.1 - ~/.nvm/versions/node/v8.11.1/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 6.0.0 - ~/.nvm/versions/node/v8.11.1/bin/npm
  Browsers:
    Chrome: 67.0.3396.99
    Firefox: 61.0
    Safari: 11.1.1
  npmPackages:
    gatsby: ^2.0.0-beta.19 => 2.0.0-beta.19

[rockchalkwushock]

Update

I can get this api to work in non-page components that are then imported into pages, but at the page level I continue to get the loading message.

[KyleAMathews]

You have both a page query and a staticquery in the same component?

[rockchalkwushock]

@KyleAMathews

Right now I am doing a page-level query the old way and then have imported components with static queries being performed in them. If I try to run a <StaticQuery /> from the page-level though I just get back the loading message. I've triple checked the queries for typos.

[KyleAMathews]

Curious why you'd want to do both a page query and a <StaticQuery/> in the same component?

[rockchalkwushock]

Oh I don't I'm just saying using a <StaticQuery /> at the page-level is returning that loading message. I have to perform a query in the old manner to get data to render there.

[iamhitarth]

Yup running in to the same issue. Is this not the way StaticQuery was intended to be used?

Also, @rockchalkwushock can you please provide a bit more detail on how you got around this issue?

[iamhitarth]

Ah just figured out how to make it work based on @KyleAMathews 's response above and this comment from #5473 .

Basically, while migrating to v2 we should modify the layout/s from v1 to use the new StaticQuery component (since the layouts are now just normal components) while the pages should still stick to using the queries from v1 - that return data as a prop for the page components.

So removing the StaticQuery component from my pages fixed the issue for me.

[m-allanson]

This seems to be a bug as using a StaticQuery in a page component should work. Demo repo is at: https://github.com/m-allanson/gatsby-issue-6350/

Run gatsby develop and open the site, you'll see Loading (Static Query) instead of the site content. Here's the StaticQuery.

[tayiorbeii]

TODO: When this issue is resolved, remove the warning paragraph from gatsby/docs/docs/static-query.md

[KyleAMathews]

@tayiorbeii when you had trouble, did you have both a page query & StaticQuery on the same page?

[tayiorbeii]

@KyleAMathews I did not.

This markup results in the Loading (StaticQuery) being rendered.

const HomePage = () => {
  return (
    <StaticQuery
      query={graphql`
        query HomePageQuery {
          site {
            siteMetadata {
              title
              description
            }
          }
        }
      `}

      render={data => <div>{JSON.stringify(data)}</div>}
    />
  )
}

[KyleAMathews]

@tayiorbeii ok, thanks! Would you mind putting up a little site reproducing this issue? Something goofy in our babel extraction logic no doubt.

[tayiorbeii]

@KyleAMathews here's a gist, I can see about a site in a bit: https://gist.github.com/tayiorbeii/6582a654746db7493cd0459e7f404b1e

also from my package.json dependencies:

  "dependencies": {
    "babel-plugin-remove-graphql-queries": "^2.0.2-beta.4",
    "gatsby": "next",
    "gatsby-source-filesystem": "^2.0.1-beta.5",
    "gatsby-transformer-remark": "^2.1.1-beta.3",
    "graphql": "^0.13.2",
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  }

[tayiorbeii]

Between the gist and @m-allanson 's repo https://github.com/m-allanson/gatsby-issue-6350/ it should be reproduced.

[KyleAMathews]

Hey ya'll, @alexluong has a PR up with a fix to this issue! Anyone want to try it out? #6597

[m-allanson]

@alexluong's fix is published as gatsby@2.0.0-beta.54

[jlengstorf]

@sdevil7th we only support one query per file. For the snippet you showed, you can split into two component files to work around this.

Another solution is to use useStaticQuery to create hooks for loading data, which allows you to overcome this without creating extra components. For example, on my site I load site metadata using a custom hook and a static query.

You could do something like that:

const one = useQueryOne();
const two = useQueryTwo();

const data = bool ? one : two;

[brettinternet]

I experienced a similar error with a malformed import.

The error:

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|   return (
>     <React.Fragment>
|       {finalData && render(finalData)}
|       {!finalData && <div>Loading (StaticQuery)</div>}

The culprit:

import { Link } from 'Gatsby' // should be 'gatsby'!

[rjmoggach]

@jlengstorf documentation describes limit of one useStaticQuery hook per file but does not say you can't use multiple <StaticQuery/> components - maybe this needs to be more obvious - (I hit the same limit and thought I was ok)

[Kenix157]

I had the same issue. You CAN'T export graphql variable. It cause this bug. Reproduced on prod. (on dev mode works good)

[marcelo-umg]

In case someone else is having this issue; I pushed my code without package-lock.json and now the live site is working. It is strange but this is the way it works. I am using the latest version of Gatsby and locally everything was working just fine, but the live site was giving the Loading(StaticQuery) screen. Now it works.

[jsartisan]

@KyleAMathews Can you take a look at this url - trend-d8qyatqwc.vercel.app? It's happening randomly and it's very frustrating. Is there any solution to this? Please guide me.

[konsuko]

I also have the Loading (Static Query) text bug, with a brief flash of the (blurred) image that instantly disappears.
This only happens in production builds (either deployed or through gatsby build, gatsby serve)

Maybe it has something to do with how I use StaticQuery in this component? Is there something fundamentally wrong here?

import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

const Image = props => (
  <StaticQuery
    query={graphql`
      query {
        images: allFile {
          edges {
            node {
              relativePath
              name
              publicURL
              childImageSharp {
                fluid(maxWidth: 1200) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    `}
    render={data => {
      const image = data.images.edges.find(n => {
        return n.node.publicURL.includes(props.filename)
      })
      if (!image) {
        return null
      }
      return (
        <Img alt={image.node.name} fluid={image.node.childImageSharp.fluid} />
      )
    }}
  />
)

export default Image

[misakimichy]

I have a pretty similar issue that @konstantinkopka has

I cannot query the siteMetadata from gatsby-config under gatsby build environment. The following component only shows Loading (StaticQuery) and I see no data.

import React from 'react';
import styled from 'styled-components';
import { StaticQuery, graphql, Link } from 'gatsby';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

// theme
import { colors } from '../styles/theme';

const Sidebar = () => (
  <StaticQuery
    query={graphql`
      query SiteQuery {
        site {
          siteMetadata {
            author
            logo
            resume
            description
          }
        }
      }
    `}
    render={data => {
      const { author, logo, resume, description } = data.site.siteMetadata;

      return (
      <Styles>
        {typeof window !== 'undefined' &&
          <Link to="/" className="no-underline profile-image-link">
            <img className="profile-image" src={logo} alt={author} />
          </Link>
        }
        <div className="name-holder">
          <h1 >{author}</h1>
          <p>{description}</p>
        </div>
      </Styles>
      );
    }}
  />
);

export default Sidebar;

// styles comes here

[KyleAMathews]

Please try upgrading to the latest Gatsby.

[misakimichy]

@KyleAMathews
I installed the latest Gatsby, and it still shows Loading (StaticQuery).

[KyleAMathews]

@misakimichy can you create a small reproduction of this that we can look at? This isn't something people are generally running into so we need to understand what combination of factors is causing trouble https://www.gatsbyjs.com/contributing/how-to-make-a-reproducible-test-case/

[SapneshNaik]

I experienced this too. That too on a production deployment. However, I could not get it to reproduce consistently as the content loaded properly on subsequent refreshes.

[torquan]

I've encountered a similar error.
Instead of displaying the image, it renders "Loading (StaticQuery)".

I've invested a bit and created a repo to reproduce the error as @KyleAMathews mentioned.
There are a few interesting things happening:

1. If you move the page from pages/app/index.js to pages/index.js it works
2. Similar, if you move AuthBackground.js (the file with the query) from components/app/authentication/AuthBackground.js to components/AuthBackground.js, it works.
3. Also true for AppLayoutContainer for the same reasons I guess, as it just holds AuthBackground
4. If you comment the StaticQuery out and then remove the comment //'s again, it will work after HotReload until you press F5
5. I have another project with similar code, where I didn't update packages, it works there. This was wrong, I updated the project and it still works. The folder structure may be different.

If there's anything else I can do to help solve this, please let me know.

Here's the repo:
https://github.com/torquan/static-query

This error happens in dev-mode and production.

Steps to reproduce:

1. git clone https://github.com/torquan/static-query
2. npm i
3. gatsby develop
4. open http://localhost:8000/app/

[EDIT: added information]
[EDIT: Should I open a new issue for this? I just noticed this is closed.]

[khaphannm]

I got the same problem, is there any fix for it ?

[mikepspc]

Also seeing this, seemingly randomly.

[grahamd711]

This issue should be reopened as it is now occurring on our production Gatsby Cloud instance.

Description
There seems to be a bug on our production builds that causes a white blank screen to show with the Loading(Static Query) in the top left corner. No other components in the application render. We are running Gatsby 3.1.2 and babel-plugin-remove-graphql-queries version 3.5.0.

Possibly related to: Loading(Static Query) white screen on gatsby build #25920

We run two StaticQueries in two separate components that render on the homepage. Here is the code for them:

Gist 1: https://gist.github.com/grahamd711/5855edb75457d804ce1d2c391a019a94

Gist 2: https://gist.github.com/grahamd711/28f62bc44b8abc82e856f14cc7b872df

Steps to reproduce
The issue is hard to reproduce and only shows intermittently on our production Gatsby Cloud instance. We are using Gatsby Cloud for builds and then pushing to Fastly CDN for hosting.

There are no errors in the console and nothing to display besides the Loading(StaticQuery) and the white page. This error only occurs on production and not on development.

We have tried to clear the cache manually within Gatsby Cloud and the issue still occurs intermittently. Is anyone running into this same problem or have advice on how to fix?

Production URL: https://mparticlecomgatsbymain07610.gtsb.io/

Expected result
The static queries should load without this loading description. The production application should continue running all page and static queries without the white screen.

Actual result
In our production environment, the Loading(Static Query) text appears in the top left. The rest of the app does not render to the page and a blank white screen is shown.

Environment

    OS: macOS 11.3
    CPU: (4) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 90.0.4430.212
    Firefox: 76.0.1
    Safari: 14.1
  npmPackages:
    gatsby: ^3.1.2 => 3.5.1 
    gatsby-image: ^3.1.0 => 3.1.0 
    gatsby-plugin-csp: ^1.1.3 => 1.1.3 
    gatsby-plugin-image: ^1.1.2 => 1.5.0 
    gatsby-plugin-manifest: ^3.1.0 => 3.1.0 
    gatsby-plugin-meta-redirect: ^1.1.1 => 1.1.1 
    gatsby-plugin-offline: ^4.1.0 => 4.1.0 
    gatsby-plugin-react-helmet: ^4.1.0 => 4.1.0 
    gatsby-plugin-react-svg: ^3.0.0 => 3.0.0 
    gatsby-plugin-root-import: ^2.0.6 => 2.0.6 
    gatsby-plugin-sass: ^4.1.0 => 4.1.0 
    gatsby-plugin-sharp: ^3.1.2 => 3.1.2 
    gatsby-plugin-sitemap: ^3.1.0 => 3.1.0 
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.20 => 1.1.21 
    gatsby-source-custom-api: ^2.1.4 => 2.1.4 
    gatsby-source-filesystem: ^3.1.0 => 3.1.0 
    gatsby-source-prismic: ^3.3.4 => 3.3.4 
    gatsby-transformer-sharp: ^3.1.0 => 3.1.0 ```

[grahamd711]

@tayiorbeii when you had trouble, did you have both a page query & StaticQuery on the same page?

@KyleAMathews would this Layout file cause issues: https://gist.github.com/grahamd711/44250c718871632b4c9eaaa69a83fe67

[Nziranziza]

I have a similar issue here

[drakata]

I've encountered a similar error.
Instead of displaying the image, it renders "Loading (StaticQuery)".

I've invested a bit and created a repo to reproduce the error as @KyleAMathews mentioned.
There are a few interesting things happening:

1. If you move the page from pages/app/index.js to pages/index.js it works
2. Similar, if you move AuthBackground.js (the file with the query) from components/app/authentication/AuthBackground.js to components/AuthBackground.js, it works.
3. Also true for AppLayoutContainer for the same reasons I guess, as it just holds AuthBackground
4. If you comment the StaticQuery out and then remove the comment //'s again, it will work after HotReload until you press F5
5. I have another project with similar code, where I didn't update packages, it works there. This was wrong, I updated the project and it still works. The folder structure may be different.

If there's anything else I can do to help solve this, please let me know.

Here's the repo:
https://github.com/torquan/static-query

This error happens in dev-mode and production.

Steps to reproduce:

1. git clone https://github.com/torquan/static-query
2. npm i
3. gatsby develop
4. open http://localhost:8000/app/

[EDIT: added information]
[EDIT: Should I open a new issue for this? I just noticed this is closed.]

Number 1 on your list worked for me. Thanks

[1-800-jono]

Same issue. Loading(Static Query only on prod.

[Barsonax]

@KyleAMathews
Sometimes I still see the Loading (Static Query) on my blog thats running in Netlify (https://the-photographing-programmer.com/). Its hard to reproduce though but this issue is not fixed.

[krichey15]

trying to build a shopify website.

I have a Page component called Shop
The Shop component is importing in a ProductGrid component

The ProductGrid component is using a

Just having these 2 components was working fine.

BUT I want my ProductGrid component to bring in a ProductCard component which also uses a and when I do this the ProductCard Component just shows data as Loading (Static Query)

Running Gatsby 3.4.1

[ratkorle]

Hi,

I am also having this issue, I upgraded 3.8.0 -> 4.2.0.
More info here: https://stackoverflow.com/questions/70097476/gatsby-loading-static-query-white-screen

[Sean-Davey]

Encountered this issue when trying to display a Gatsby link component with some slug data that I was retrieving from the contentful api with a static query, I was incorrectly setting the data in the links to prop, after mapping it resolved, for anyone getting a similar issue it might be worth double checking that the data you are retrieving is being set correctly in whichever way you are using it.

[simonvomeyser]

Hm, I had this issue popping up all of the sudden.

For me, gatsby clean fixed the issue. I ran a build after that to rebuild the cache and now everything seems to be working fine. 🤔

Not really a fix but maybe this helps a person or two.