Gatsby 查询留在编译后的代码中

Posted 2023-03-08

【中文标题】Gatsby 查询留在编译后的代码中

【英文标题】：Gatsby query was left in the compiled code

【发布时间】：2019-12-09 13:18:24

【问题描述】：

使用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.

这是我试图从 Wordpress 获取链接列表的 index.js 页面：

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 中，我可以获取数据并浏览它。我似乎无法在这里使用它。

我对盖茨比很陌生。

【问题讨论】：

发现了我的问题。 graphql(``) 到 graphql`query` 没有意识到有区别！

【参考方案1】：

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

【讨论】：

如何使用它

gatsbyjs.com/blog/2019-02-20-introducing-use-static-query

【参考方案2】：

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

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