Gatsby: [V2] Component using <StaticQuery> renders <div>Loading (StaticQuery)</div>

[ylorenzana]

Trying to add component from gatsby-image loading it in with a StaticQuery doesn't render the component. Also, after adding the StaticQuery and Img component to my component, everything in the page looks blurry.

Screenshot

Tried many different approaches: not using query fragments, changing my gatsby-config for how it finds the files, and they all gave me the same output.

Component (excluded JSS to keep it short)

import React from 'react';
import { Link } from 'gatsby';
import { css } from 'emotion';
import { StaticQuery } from 'gatsby';
import Img from 'gatsby-image';

import { colors } from '../layouts/cssConstants';
import avatar from '../assets/avatar.png';
import IconBar from '../components/IconBar';

const Header = () => (
 <StaticQuery
    query={graphql`
      query GatsbyImageQuery {
        imageSharp(id: { regex: "/avatar/" }) {
          sizes(maxWidth: 200) {
            ...GatsbyImageSharpSizes_tracedSVG
          }
        }
      }
    `}
    render={data => (
      <header className={header}>
        <div>{data}</div>
        <nav className={navBar}>
          <Link to="/about" activeClassName={activeLink}>
            <span>About</span>
          </Link>
        </nav>
        <div className={logo}>
          <Link to={'/'}>
            <Img sizes={data.sizes} />
          </Link>
          <Link to={'/'}>
            <h1>the dev blog of yang lorenzana</h1>
          </Link>
          <IconBar />
        </div>
      </header>
    )}
  />
);

export default Header;

gatsby-config

module.exports = {
  siteMetadata: {
    title: 'The Dev Blog of Yang Lorenzana',
    author: 'Yang Lorenzana',
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/assets/`,
        name: 'img',
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          'gatsby-remark-prismjs',
          'gatsby-remark-copy-linked-files',
          'gatsby-remark-smartypants',
        ],
      },
    },
    `gatsby-plugin-emotion`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: `UA-120605896-1`,
      },
    },
    `gatsby-plugin-offline`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [`ubuntu\:400,500,700`],
      },
    },
    {
      resolve: `gatsby-plugin-favicon`,
      options: {
        logo: './src/assets/avatar.png',
        icons: {
          android: true,
          appleIcon: true,
          appleStartup: true,
          coast: false,
          favicons: true,
          firefox: true,
          twitter: false,
          yandex: false,
          windows: false,
        },
      },
    },
  ],
};

[KyleAMathews]

Loading data for StaticQuerys can occasionally be buggy right now. There's a planned refactor of this system that'll make it much more reliable.

Sorry for the roughness and thanks for the bug report!

[sound2gd]

after deleting export const query = ..., my static query works.

[lekkerduidelijk]

I can confirm that changing export const query = ... to const query = ... fixes this StaticQuery bug for me as well.

[dsebastien]

@KyleAMathews Hello. I'm still facing this issue.

For some reason, even if I inline the queries, I end up with "Loading (StaticQuery)". Moreover it only happens with gatsby build and not with gatsby develop.