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

Question

我正在尝试对我的 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}>

Answer 1

我认为您使用了错误的字符来执行您的 graphql 查询。尝试将 ' 替换为 ` 字符 ?