menu

Gatsby.js

Fast in every way that matters. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

Channels
Team

Gatsby V2 Migration: Endless "Loading (StaticQuery)" when using StaticQuery for…

September 18, 2018 at 1:58am

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

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

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

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

. 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

. 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