Gatsby: 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? https://github.com/gatsbyjs/gatsby/pull/6597

[m-allanson]

@alexluong's fix is published as [email protected]

[sgnl]

fwiw, for those coming from Search Engine results - I had a renegade export const query = // ... more code in a Component that was used within a Page component that I overlooked. Once I removed the export the page loaded correctly ;)

[codeithuman]

@sgnl's fix worked for me. I had export const query = ... and just removed export since I'm not using it in any other components/files. const query = ....

I should also note, 'Loading (StaticQuery)' only displayed in production once deployed to Netlify. The content is coming from Contentful.

[sdevil7th]

If I use two static query element in a single component it's having this same issue. Is it the desired behaviour?

Code would look something like this:
return bool ? <StaticQuery .... /> : <StaticQuery .... />

[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'!

[robmoggach]

@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.

[konstantinkopka]

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. It shows Loading (StaticQuery) on the component below.

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/

[ezralazuardy]

I was experiencing this StaticQuery bug too.

fortunately, upgrading gatsby with npm upgrade to the latest version fix this bug.

note: I only use StaticQuery in the components, and not using it in pages.

[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.

[yihong0618]

Find a way to solve this.
Because there is cache in vercel or Netlify.
you need to change yarn or npm build from gatsby build to gatsby clean && gatsby build can solve this problem.
Which can aviod the cache.