解析 GraphQL 查询

Question

我正在使用 Gatsby（基于 React 的框架）作为 CMS，并尝试创建一个将返回一系列 JSON 的组件。

但是由于某种原因，出现了解析错误 -

',' expected.ts(1005)

我的代码-

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

const Carresources = () => {
  const data = useStaticQuery(graphql`
    query CarresourcesQuery {
      dataYaml {
        Carresources {
          title
        }
      }
    }
  `)
  return (
          {data.dataYaml.Carresources.map(node => (
            <script type="application/ld+json">{"@context":"https://schema.org","@type":"Car","name":{node.title}}</script>
          ))}
  )
}

export default Carresources

return 语句之后，dataYaml 之前的点显示解析错误。如果我在大括号之前和 return 语句之后放置任何 HTML 代码，那就没问题了。

非常感谢任何帮助。

Answer 1

您的模块存在三个 JavaScript/JSX 语法错误。

1. 您正在尝试从此处的 React 组件返回格式错误的 JS 对象：

return {data.dataYaml.Carresources.map(node => ...)}

2. LD-JSON 脚本标签将在 HTML 文档中正确定义，但它不是有效的 JSX，因为 JSON 对象周围的大括号在此处被解析为解释内容的 JSX 标记：

<script type="application/ld+json">
  {"@context":"https://schema.org","@type":"Car","name":{node.title}}
</script>

3. LD-JSON 对象的

   name

   字段包含无效的嵌套对象：

{"name": {node.title}}

这是一个返回语句，其中这些语法错误已得到修复：

  return (
    data.dataYaml.Carresources.map(node => (
      <script type="application/ld+json">
        {JSON.stringify({
          "@context": "https://schema.org",
          "@type": "Car",
          "name": node.title
        })}
      </script>
    ))
  )