Gatsby: Gatsby should render query, gets error instead

[softchris]

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.

[softchris]

2 things.. I should obviously have done graphql call without parenthesis. Also it works if I move it outside of the component, like so:

import React from 'react';

import { graphql, useStaticQuery } from 'gatsby';

export default ({ data }) => {

  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>
  )
}

export const data = graphql `
    query {
      allFile {
        edges {
          node {
            name
            publicURL
          }
        }
      }
    }
`

However, I can't get it to work if I keep the call to graphql within component definition. I just get a number back. Am I missing some call or?

[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>
  )
}

[softchris]

appreciate that, thank you :)

[vladar]

Gatsby doesn't run your queries in run-time. Instead, when babel compiles your sources GraphQL queries are stripped completely.

So two options:

1. Have your query outside of a component
2. OR use useStaticQuery as suggested by @herecydev

[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! 💜