我如何通过GraphQL从json中获取数据?

Question

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给我错误不能读取未定义的属性(读取'compdata')

Answer 1

您只需要遵循关于从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`,
},
},
],
}

节点的别名将依赖于您的文件夹结构和您的命名(没有提供)，在docs示例中，给定letters.json，例如:

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

所以在你的graphhiql游乐场(localhost:8000/___graphql)，你将能够查询allLettersJson节点:

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

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

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

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