Gatsby - GraphQL - StaticQuery 标签 - 由于查询字符串的奇怪行为，站点无法编译

Posted 2023-03-08

【中文标题】Gatsby - GraphQL - StaticQuery 标签 - 由于查询字符串的奇怪行为，站点无法编译

【英文标题】：Gatsby - GraphQL - StaticQuery tag - site fails to compile due to strange behavior with query string

【发布时间】：2019-12-04 06:08:48

【问题描述】：

我正在尝试对我的 gatsby 网站的 wordpress 数据库进行简单的 GraphQL 查询并呈现结果。但是，该站点无法编译并出现一些令人费解的错误。

如果我在多行字符串中进行查询（graphql 查询的标准），则错误提示我留下了未终止的字符串。如果我将查询放在单行字符串中，我会收到一个新错误，它需要一个右大括号而不是字符串。

我的文件带有多行查询字符串：

import React from "react"
import  Link  from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
import  StaticQuery, GraphQL  from "gatsby"

const IndexPage = () => (
  <Layout>
    <StaticQuery
      query=GraphQL'
        
          allWordpressPage 
            edges 
              node 
                id
                title
                content
              
            
          
        ' render=props => (
      <div>
        props.allWordpressPage.edges.map(page => (
          <div key=page.node.id>
            <h1>
              page.node.title
            </h1>
            <div dangerouslySetInnerhtml=‌__html: page.node.content />
          </div>
        ))
      </div>
    ) />
  </Layout>
)

export default IndexPage

随之而来的错误：

ERROR in ./src/pages/index.js
Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
SyntaxError: /Users/kennansmith/Desktop/Temp_Task_Folder/gatsby-wp/src/pages/index.js: Unterminated string constant (12:20)

  10 |   <Layout>
  11 |     <StaticQuery
> 12 |       query=GraphQL'
     |                     ^
  13 |       query 
  14 |           allWordpressPage 
  15 |             edges 

解决字符串问题时的文件：

import React from "react"
import  Link  from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
import  StaticQuery, GraphQL  from "gatsby"

const IndexPage = () => (
  <Layout>
    <StaticQuery
      query=GraphQL' allWordpressPage  edges  node  id title content    ' render=props => (
      <div>
        props.allWordpressPage.edges.map(page => (
          <div key=page.node.id>
            <h1>
              page.node.title
            </h1>
            <div dangerouslySetInnerHTML=‌__html: page.node.content />
          </div>
        ))
      </div>
    ) />
  </Layout>
)

export default IndexPage

随之而来的错误：

ERROR in ./src/pages/index.js
Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
SyntaxError: /Users/kennansmith/Desktop/Temp_Task_Folder/gatsby-wp/src/pages/index.js: Unexpected token, expected "" (12:20)

  10 |   <Layout>
  11 |     <StaticQuery
> 12 |       query=GraphQL' allWordpressPage  edges  node  id title content    ' render=props => (
     |                     ^
  13 |       <div>
  14 |         props.allWordpressPage.edges.map(page => (
  15 |           <div key=page.node.id>

【参考方案1】：

我认为你用坏字符来做你的graphql query。尝试用`字符替换'？

【讨论】：

这就是问题所在。谢谢！

【参考方案2】：

从包中导入是区分大小写的。

试试：

import graphql from "gatsby"