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

Posted 2023-03-08

【中文标题】如何通过 GraphQL 从 json 获取数据？

【英文标题】：How can I get data from a json via GraphQL?

【发布时间】：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），它应该可以为您处理很多事情。虽然我不太确定你想做什么

请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

【参考方案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。