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 query。尝试用`字符替换'吗？

Answer 2

从包中导入区分大小写。

尝试：

onActivityResult()

Gatsby-GraphQL-StaticQuery标记-网站由于查询字符串的异常行为而无法编译

2 个答案: