如何通过 GraphQL 从 json 获取数据？答案

【问题标题】：How can I get data from a json via GraphQL?如何通过 GraphQL 从 json 获取数据？
【发布时间】：2021-11-05 06:19:26
【问题描述】：

enter code here {
 "compdata": [
{
  "id": 1,
  "title": "FlexBox",
},
{
  "id": 2,
  "title": "Grid layout",
},

] }

enter code here **file in:-- src-data-data.json**
enter code here export const IndexQuery = graphql`
query IndexQuery {
dataJson {
compdata {
  id
  example
}

} } `

Blockquote 给我错误 Cannot read properties of undefined (reading 'compdata')

【问题讨论】：

您能否更清楚地说明您的问题，很难知道您要达到什么目的
通常使用 graphql 并做出反应，您使用的是 graphql 客户端（可能是 Apollo），它应该可以为您处理很多事情。虽然我不太确定你想做什么
请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： javascript reactjs json graphql gatsby

【解决方案1】：

您只需关注docs about Sourcing from JSON即可。

也就是说，从 JSON 本地文件中获取时，您不需要使用 GraphQL，您只需导入对象，例如：

import React from "react"
import JSONData from "../../content/My-JSON-Content.json"

const SomePage = () => (
  <div style={{ maxWidth: `960px`, margin: `1.45rem` }}>
    <ul>
      {JSONData.compdata.map((data, index) => {
        return <li key={`content_item_${index}`}>{data.title}</li>
      })}
    </ul>
  </div>
)
export default SomePage

在这种情况下，您可以将 JSON 数据导入为 JSONData 并在 compdata 的数组中循环。

但是，如果您仍想使用 GraphQL，则需要使用 gatsby-transformer-json 插件，该插件将从您的 JSON 源创建可查询的 GraphQL 节点：

通过以下方式安装：

npm install gatsby-transformer-json

然后用你的gatsby-config.js:

module.exports = {
  plugins: [
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `./src/your/json/folder`,
      },
    },
  ],
}

节点的别名将取决于您的文件夹结构和您的命名（尚未提供），在文档示例中，给定 letters.json，例如：

[{ "value": "a" }, { "value": "b" }, { "value": "c" }]

因此，在您的 GraphiQL 游乐场 (localhost:8000/___graphql) 中，您将能够查询allLettersJson节点：

 {
  allLettersJson {
    edges {
      node {
        value
      }
    }
  }
}

您可以添加typeName 选项来修复您的命名，例如：

{
  resolve: `gatsby-transformer-json`,
  options: {
    typeName: `Json`,
  },
},

在这种情况下，创建的节点将是allJson。

【讨论】：