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.