Gatsby query was left in the compiled code

Using gatsby develop Gatsby site compiles but when I navigate to it in my localhost, I get this error in the browser:

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.

Here is my index.js page where I am trying to get a list of links from Wordpress:

import React from "react"
import { graphql } from "gatsby"

import Layout from "../layouts/layout"
import SEO from "../components/seo"

const IndexPage = ({data}) => (
  <Layout>
    <SEO title="Home" />
      <h1> Where's The Bug </h1>
        <ul>
          {
            data.allWordpressPost.edges.map(node => <li>node.link</li>)
          }
        </ul>
  </Layout>
)

export const linkData = graphql(`
  query MyQuery {
    allWordpressPost {
      edges {
        node {
          link
        }
      }
    }
  }
  `);
export default IndexPage

I suspect I can't call a query from here and map them for some reason?

In my __graphQl however I am able to get the data and browse it. I just can't seem to use it here.

I'm very new to Gatsby.

Solution 1:

I noticed that you haven't use useStaticQuery. Also delete the .cache file and run again that will solve the problem