Gatsby should render query, gets error instead

Description

This is what I’m doing

import React from 'react';

import { graphql, useStaticQuery } from 'gatsby';

export default () => {
  const data = graphql(`
    query {
      allFile {
        edges {
          node {
            name
            publicURL
          }
        }
      }
    }
  `)
  console.log('data', data);
  return (
    <React.Fragment>
      <h2>Images</h2>
      {data.allFile.edges.map(edge => <div><img alt={edge.node.name} src={edge.node.publicURL} />{edge.node.name}</div>)}
    </React.Fragment>
  )
}

This query renders fine on http://localhost:8000/___graphql

Steps to reproduce

1. Create a new gatsby project with gatsby new
2. add components pages/images.js, with the following content:

import React from 'react';

import { graphql, useStaticQuery } from 'gatsby';

export default () => {
  const data = graphql(`
    query {
      allFile {
        edges {
          node {
            name
            publicURL
          }
        }
      }
    }
  `)
  console.log('data', data);
  return (
    <React.Fragment>
      <h2>Images</h2>
      {data.allFile.edges.map(edge => <div><img alt={edge.node.name} src={edge.node.publicURL} />{edge.node.name}</div>)}
    </React.Fragment>
  )
}

See error output:

Error: It appears like Gatsby is misconfigured. Gatsby related `graphql` calls are supposed to only be evaluated at compile-time, and then compiled away. Unfortunately, something went wrong and the query was left in the compiled code.

Unless your site has a complex or custom babel/Gatsby configuration this is likely a bug in Gatsby.

Expected result

What should happen?

Actual result

What happened.

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

[herecydev]

You need to use the useStaticQuery. So your code should be:

import React from 'react';

import { graphql, useStaticQuery } from 'gatsby';

export default () => {
  const data = useStaticQuery(graphql`
    query {
      allFile {
        edges {
          node {
            name
            publicURL
          }
        }
      }
    }
  `)
  console.log('data', data);
  return (
    <React.Fragment>
      <h2>Images</h2>
      {data.allFile.edges.map(edge => <div><img alt={edge.node.name} src={edge.node.publicURL} />{edge.node.name}</div>)}
    </React.Fragment>
  )
}

[vladar]

Thank you for opening this, @softchris

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