编译后的代码中遗留了 Gatsby 查询

Question

使用 gatsby develop Gatsby 站点编译但是当我在本地主机中导航到它时，我在浏览器中收到此错误：

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.

这是我的 index.js 页面，我在其中尝试从 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

我怀疑我出于某种原因无法从此处调用查询并映射它们？

但在我的 __graphQl 中，我能够获取数据并进行浏览。我似乎无法在这里使用它。

我是 Gatsby 的新手。

Answer 1

我注意到您没有使用 useStaticQuery。同时删除 .cache 文件并再次运行即可解决问题

Answer 2

从 Graphql 中删除 ()。它们用于静态查询。

export const linkData = graphql`
  query MyQuery {
    allWordpressPost {
      edges {
        node {
          link
        }
      }
    }
  }
`

编译后的代码中遗留了 Gatsby 查询

Gatsby query was left in the compiled code

graphql

gatsby

graphql-js