Join the conversation

Sign in to join this conversation, and others like it, in the communities you care about.

Gatsby.js

A channel about Gatsby, which includes GraphQL, React, static site generators, Redux, JavaScript, serverless.

Gatsby.js / General

Gatsby V2 Migration: Endless "Loading (StaticQuery)" when using StaticQuery for blog post template

Gatsby V2 Migration: Endless "Loading (StaticQuery)" when using StaticQuery for blog post template

Gatsby.js/General · September 18, 2018 at 1:58am

Gatsby V2 Migration: Endless "Loading (StaticQuery)" when using StaticQuery for blog post template

Gatsby.js / General · September 18, 2018 at 1:58am
I'm upgrading a site to Gatsby V2 and everything is going smoothly except for updating the GraphQL query on my blog post template to the new StaticQuery:
Updated code in /templates/post-page.js:
import React from 'react'; import { StaticQuery, graphql } from 'gatsby'; import GlobalLayout from '../components/Layout/GlobalLayout'; const PostPage = () => ( <StaticQuery query={graphql` query PostPageQuery($slug: String!) { markdownRemark(fields: { slug: { eq: $slug } }) { html frontmatter { author title imageHero imageHeroAlt } } } `} render={data => ( <GlobalLayout> <article> <h1> {data.markdownRemark.frontmatter.title} </h1> {data.markdownRemark.frontmatter.imageHero && <img src={data.markdownRemark.frontmatter.imageHero} alt={data.markdownRemark.frontmatter.imageHeroAlt} /> } <p> By {data.markdownRemark.frontmatter.author} </p> <div dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }} /> </article> </GlobalLayout> )} /> ); export default PostPage;
Original code that still works:
import React from 'react'; import { graphql } from 'gatsby'; import GlobalLayout from '../components/Layout/GlobalLayout'; const PostPage = ({ data }) => ( <GlobalLayout> <article> <h1> {data.markdownRemark.frontmatter.title} </h1> {data.markdownRemark.frontmatter.imageHero && <img src={data.markdownRemark.frontmatter.imageHero} alt={data.markdownRemark.frontmatter.imageHeroAlt} /> } <p> By {data.markdownRemark.frontmatter.author} </p> <div dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }} /> </article> </GlobalLayout> ); export const postPageQuery = graphql` query PostPageQuery($slug: String!) { markdownRemark(fields: { slug: { eq: $slug } }) { html frontmatter { author title imageHero imageHeroAlt } } } `; export default PostPage;
Thoughts on why this might be happening? I've updated all queries in my pages and GlobalLayout without issue.
I tried referencing the gatsby-starter-blog to see how it was updated to V2 but the blog post template still uses the v1 query syntax: https://github.com/gatsbyjs/gatsby-starter-blog/blob/master/src/templates/blog-post.js

September 18, 2018 at 6:20am

StaticQuery doesn't have access to context. That’s why you need to use the normal query in your template. And that’s fine! StaticQuery is not „better“ than the normal query

  • reply
  • like

September 18, 2018 at 7:47am

There is an issue which has been for a lonnng time (I don't know if it's fixed with the new release), if you make a simple code change inside the render function (i.e. add a new variable) then the Loading issue should be fixed. Also, this problem don't happen in production it's only for development.

  • reply
  • like

September 18, 2018 at 10:51am

@emasuriano I don't think that's the issue here and rather what I pointed out.

  • reply
  • like

September 19, 2018 at 5:55am

I am with @LekoArts. I am doing an upgrade of a Gatsby site right now and based on what I have read. In your pages or templates you can still use the regular query from v1. The difference in v2 is that your layouts aren't anymore a special component that has access to the queries.

  • reply
  • like

September 25, 2018 at 7:35pm

Sorry for the delay in responding; I never got a notification of your reply. Thank you so much for clarifying this. I had a feeling it was ok to keep it the same as it originally was but couldn't understand the situation.

  • reply
  • like

I am with @LekoArts. I am doing an upgrade of a Gatsby site right now and based on what I have read. In your pages or templates you can still use the regular query from v1. The difference in v2 is that your layouts aren't anymore a special component that has access to the queries.

Thanks so much for the background info on this. That helps clear up my confusion as to why this was happening.

  • reply
  • like

Log in or sign up to chat