Gatsby: Loading (StaticQuery)

[EmilioHerreraSoukup]

Hello, I am using a staticquery inside a component to fetch some images, it works perfectly on development but once built on production it just displays Loading (StaticQuery). Am I doing something wrong?

*Sorry for posting the issue, I tried the other threads but they all seem unconnected.

```import React from 'react'
import Img from 'gatsby-image'
import reda from '../../images/reda.svg'
import holand from '../../images/holand.svg'
import sca from '../../images/sca.svg'
import { StaticQuery, graphql } from 'gatsby'

export const query = graphql`
query materialsQuery {
material1: imageSharp(id: { regex: "/IMG_5588p.jpg/" }) {
sizes(maxWidth: 630) {
...GatsbyImageSharpSizes_tracedSVG
}
}

material2: imageSharp(id: { regex: "/IMG_5513p.jpg/" }) {
  sizes(maxWidth: 630) {
    ...GatsbyImageSharpSizes_tracedSVG
  }
}

material3: imageSharp(id: { regex: "/IMG_5340p.jpg/" }) {
  sizes(maxWidth: 630) {
    ...GatsbyImageSharpSizes_tracedSVG
  }
}

}
`

const Materials = () => (
query={query}
render={data => {
return (

materials}>

text

      <div className="materials__holder">
        <div className="materials__holder__item">
          <img src={sca} />

          <p>
     text
          </p>

          <Img
            fluid={data.material1.childImageSharp.fluid}
            alt={''}
          />
        </div>

        <div className="materials__holder__item">
          <img src={holand} />
          <p>
        text
          </p>

          <Img
            fluid={data.material2.childImageSharp.fluid}
            alt={'text'}
          />
        </div>

        <div className="materials__holder__item">
          <img src={reda} />
          <p>
          text
          </p>

          <Img
            fluid={data.material3.childImageSharp.fluid}
            alt={''}
          />
        </div>
      </div>
    </main>
  )
}}

/>
)
export default Materials

```

Depenencies:

"dependencies": {
"bootstrap": "^4.1.3",
"gatsby": "^2.0.55",
"gatsby-image": "^2.0.20",
"gatsby-link": "^2.0.6",
"gatsby-plugin-favicon": "^3.1.4",
"gatsby-plugin-google-analytics": "^2.0.7",
"gatsby-plugin-google-fonts": "^0.0.4",
"gatsby-plugin-react-helmet": "^3.0.2",
"gatsby-plugin-robots-txt": "^1.3.0",
"gatsby-plugin-sass": "^2.0.4",
"gatsby-plugin-sharp": "^2.0.13",
"gatsby-plugin-sitemap": "^2.0.2",
"gatsby-source-filesystem": "^2.0.8",
"gatsby-transformer-sharp": "^2.1.8",
"google-map-react": "^1.1.1",
"node-sass": "^4.10.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-helmet": "^5.2.0",
"react-images": "^0.5.19",
"react-photo-gallery": "^6.2.2",
"react-powerplug": "^1.0.0",
"react-slick": "^0.23.2",
"react-visibility-sensor": "^5.0.2",
"slick-carousel": "^1.8.1"
},

[Siilwyn]

I think it would help if you could create a repository with the minimal code to reproduce this issue.

[Ontopic]

You can not use a query stored in a variable, for some reason. I spent quite a lot of time on this myself. Just inline the query in your StaticQuery JSX and it should work.

[LekoArts]

@Ontopic Of course you can:
https://github.com/LekoArts/gatsby-starter-prismic/blob/master/src/components/SEO/SEO.jsx#L133-L152

But with the information that OP gave you can't really help him.

[aofolts]

@Ontopic @LekoArts @EmilioHerreraSoukup You need to remove export from your query variable. I was having the same problem, and that fixed it for me.

[EmilioHerreraSoukup]

@Ontopic @aofolts Thank you so much! inlining the query fixed the issue!

[guoshencheng]

@Ontopic @LekoArts @EmilioHerreraSoukup You need to remove export from your query variable. I was having the same problem, and that fixed it for me.

thanks god to tell me this magic!

[dixitk13]

this export thing needs to be documented somewhere!

[jonniebigodes]

@dixitk13 the team is more than welcome for a pull request with this small at the same time a big one to the documentation. Feel free to do it. Hoping to see that pull request in the near future and with that issues similar to this one being resolved. Sounds good?