"The result of this StaticQuery could not be fetched" on basic graphql query to render gatsby-image

Description

Executing gatsby develop throws the following error:

Error: The result of this StaticQuery could not be fetched. 
This is likely a bug in Gatsby and if refreshing the page
does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues

when executing the basic use case as per the official tutorial:

const  data = useStaticQuery(graphql`
	query  MyQuery {
		file(relativePath: {eq: "myImage.jpg"}) {
			childImageSharp {
				fluid {
					aspectRatio
					base64
					sizes
					src
					srcSet
				}
			}
		}
	}
`);

I can not seem to figure out what’s wrong as the query in graphql’s IDE at http://localhost:8000/___graphql seems to be delivering expected results.

Steps to reproduce

git clone https://github.com/dfamilia33/alphaphiotasreact.git
git reset --hard c4302f9f4abfea9d9d0d3cc13ff9392df3fc2e17
cd alphaphiotasreact
gatsby develop

Code that produces bug: src\pages\index.js

import  React  from  "react"
import  ReactDOM  from  'react-dom';
import  Toolbar  from  "../components/toolbar"
import  Img  from  "gatsby-image"
import { useStaticQuery, graphql} from  "gatsby"

export  default  function  Index() {
	const  data = useStaticQuery(graphql`
		query  MyQuery {
			file(relativePath: {eq: "myImage.jpg"}) {
				childImageSharp {
					fluid {
						aspectRatio
						base64
						sizes
						src
						srcSet
					}
				}
			}
		}
	`);

  

	return (
		<div>
			<Toolbar/>
			<Img  fluid = {data.childImageSharp.fluid}
			alt = "Chapter Photo"
			/>
		</div>
	)
}

ReactDOM.render(<Index/>, document.getElementById('___gatsby'));

Expected Result

gatsby develop renders page with optimized image

Actual Result

gatsby develop produces above error

Environment

System: 
	OS: Ubuntu 18.04.1 LTS (Bionic Beaver)
	CPU: Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
	Shell: version 4.4.19(1)-release
Binaries:
	Node: v13.7.0
	Npm: v6.13.6
Browsers:
	Chrome: 81.0.4044.138
	Edge: 42.17134.1098.0
npmPackages:
├── bootstrap@4.5.0
├── gatsby@2.21.22
├── gatsby-image@2.4.3
├── gatsby-plugin-sharp@2.6.3
├── gatsby-source-filesystem@2.3.3
├── gatsby-transformer-sharp@2.5.2
├── UNMET PEER DEPENDENCY jquery@1.9.1 - 3
├── UNMET PEER DEPENDENCY popper.js@^1.16.0
├── prettier@2.0.5
├── react@16.13.1
├── react-bootstrap@1.0.1
├── react-dom@16.13.1
└── styled-components@5.1.0

Thank you!

[simonwinter]

I can concur with @sbardian - adding a comment to the query seems to resolve this! It does seem like an issue with the cache!

[vladar]

Thank you for opening this, @dfamilia33

The culprit is this line in pages/index.js:

ReactDOM.render(<Index/>, document.getElementById('___gatsby'));

You don’t need it there. This will render the component before the static query is executed by Gatsby. If I remove this line everything works as expected.

We’re marking this issue as answered and closing it for now but please feel free to comment and mention me if you would like to continue this discussion. We hope we managed to help and thank you for using Gatsby! 💜