如何通过GraphQL从JSON中获取数据并解决compdata读取报错

1. 排查JSON文件合法性 #

你提供的JSON存在两处语法错误，会直接导致解析失败，使得返回的dataJson为undefined：

• 每个对象最后一个属性后多了尾逗号（"title": "FlexBox",末尾的逗号），标准JSON规范不支持尾逗号
• 你贴出的JSON片段结构不完整，缺少闭合符号
  修正后的合法JSON内容如下：

{
  "compdata": [
    {
      "id": 1,
      "title": "FlexBox"
    },
    {
      "id": 2,
      "title": "Grid layout"
    }
  ]
}

2. 排查数据源配置是否生效 #

如果你使用的是Gatsby这类支持读取本地JSON的框架，需要先确认相关插件已经正确安装配置：

• 必须安装gatsby-source-filesystem和gatsby-transformer-json两个插件
• 要在gatsby-config.js中配置JSON文件所在目录的读取规则，示例配置如下：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`,
      },
    },
    `gatsby-transformer-json`,
  ],
}

配置修改后必须重启本地开发服务才能生效。

3. 修正GraphQL查询字段 #

你当前的查询请求了example字段，但JSON中的compdata数组项根本没有这个属性，字段不匹配会导致查询返回异常。修正后的查询代码如下：

export const IndexQuery = graphql`
query IndexQuery {
  dataJson {
    compdata {
      id
      title
    }
  }
}
`

验证方式 #

可以先在框架自带的GraphQL playground（默认地址一般是http://localhost:8000/___graphql）运行上述修正后的查询，确认能正常返回compdata数据后再放到业务代码中使用即可。

内容的提问来源于stack exchange，提问作者shaikh