Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[V2] Component using <StaticQuery> renders <div>Loading (StaticQuery)</div> #6032

Closed
ylorenzana opened this issue Jun 19, 2018 · 4 comments

Comments

Projects
None yet
5 participants
@ylorenzana
Copy link
Contributor

commented Jun 19, 2018

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

image

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

This comment has been minimized.

Copy link
Contributor

commented Jun 19, 2018

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

This comment has been minimized.

Copy link

commented Nov 28, 2018

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

@lekkerduidelijk

This comment has been minimized.

Copy link

commented Dec 23, 2018

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

@dsebastien

This comment has been minimized.

Copy link

commented Jan 18, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.