[v2] StaticQuery graphql fails with whitespace

[audiolion]

Description

[v2] In the new StaticQuery component the graphql gatsby export fails if there is whitespace in the graphql document.

Steps to reproduce

This is a component defined in the components directory that never loads:

import React from 'react';
import { StaticQuery, graphql } from 'gatsby';

const Layout = ({ children, location }) => (
  <StaticQuery
    query={graphql`
      query SiteData {
        site {
          siteMetadata {
            title
            description
            keywords
          }
        }
        allContentfulProject {
          edges {
            node {
              id
              name
              slug
            }
          }
        }
      }
    `}
    render={data => (
      {children}
    )}
  />
);

export default Layout;

Browser:

React tree:

When I remove the extra whitespace and format the code like this it works:

import React from 'react';
import { StaticQuery, graphql } from 'gatsby';

const Layout = ({ children, location }) => (
  <StaticQuery
    query={graphql`
  query SiteData {
    site {
      siteMetadata {
        title
        description
        keywords
      }
    }
    allContentfulProject {
      edges {
        node {
          id
          name
          slug
        }
      }
    }
  }
`}
    render={data => (
      {children}
    )}
  />
);

export default Layout;

Expected result

graphql document should be parsed, page should load

Actual result

Sits on Loading and never updates with data

Environment

System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Shell: 4.4.19 - /usr/local/bin/bash
Binaries:
Node: 10.8.0 - ~/.nodenv/shims/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.2.0 - ~/.nodenv/shims/npm
Browsers:
Chrome: 68.0.3440.106
Firefox: 59.0.1
Safari: 11.1.2
npmPackages:
gatsby: next => 2.0.0-rc.4
gatsby-image: next => 2.0.0-rc.1
gatsby-plugin-emotion: next => 2.0.0-rc.1
gatsby-plugin-google-fonts: next => 0.0.4
gatsby-plugin-react-helmet: next => 3.0.0-rc.1
gatsby-plugin-sharp: next => 2.0.0-rc.2
gatsby-remark-images: next => 2.0.1-rc.1
gatsby-source-contentful: next => 2.0.1-rc.2
gatsby-source-filesystem: next => 2.0.1-rc.1
gatsby-transformer-remark: next => 2.1.1-rc.1
gatsby-transformer-sharp: next => 2.1.1-rc.2
npmGlobalPackages:
gatsby-cli: 2.0.0-rc.1

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[audiolion]

To just add a bit more here, sometimes this doesn't reproduce and sometimes it does, it is like it gets caught in some caching issue and by moving the whitespace around it invalidates the cache and fixes it.

[cwgw]

I am experiencing this as well, and I'm pretty sure a cache invalidation problem.

rm -rf .cache and rerunning gatsby develop fixes the problem until you make further changes to your StaticQuery query (including addition/deletion of whitespace). Doing so repeatedly results in a bunch of new json files in public/static/d/ with different file names but identical content.

It seems that any change to the query—even whitespace changes—produces a different hashed id (by babel-plugin-remove-graphql-queries?) and causes the check in gatsby-browser-entry to fail.

Steps to reproduce

Create a new site with the v2 default starter.

gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-default#v2

Run gatsby develop.

Open up src/components/layout.js and stick a few extra spaces into the StaticQuery's query prop

  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
                     siteMetadata {
            title
          }
        }
      }
    `}

Results in Loading (StaticQuery)

[audiolion]

@cwgw thanks for doing some extra investigation 👍

edit: woops, misclicked the button

[Chuloo]

Can you point to lines in your reproduction with the whitespaces? @audiolion

[audiolion]

@Chuloo I am not sure what you mean? The whitespace is in the query:

    query={graphql`
      query SiteData {
        site {
          siteMetadata {
            title
            description
            keywords
          }
        }
        allContentfulProject {
          edges {
            node {
              id
              name
              slug
            }
          }
        }
      }
    `}

// vs

    query={graphql`
  query SiteData {
    site {
      siteMetadata {
        title
        description
        keywords
      }
    }
    allContentfulProject {
      edges {
        node {
          id
          name
          slug
        }
      }
    }
  }
`}

[pieh]

I finally got some time to reproduce it. Will be following up with PR fixing that shortly