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

问题描述

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
}

}}`

推荐答案

您只需按照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。

这篇关于如何通过GraphQL从JSON获取数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！