GraphQL 查询从 JSON 数据源返回 GraphiQL 和 App 中的空对象

Posted 2023-03-08

技术标签:

【中文标题】GraphQL 查询从 JSON 数据源返回 GraphiQL 和 App 中的空对象【英文标题】：GraphQL Query returns null objects both in GraphiQL and App from JSON data source 【发布时间】：2019-12-26 02:29:05 【问题描述】：

我正在尝试通过 Gatsby 中的 GraphQL 获取我的模拟 JSON 数据。响应显示正确的数据，但也显示两个空对象。为什么会这样？

我正在使用gatsby-transformer.json 插件查询我的数据，并使用gatsby-source-filesystem 将转换器指向我的 json 文件。

categories.json 我正在尝试使用的模拟文件 :)


  "categories": [
    
      "title": "DEZERTY",
      "path": "/dezerty",
      "categoryItems": [
        
          "categoryName": "CUKRIKY",
          "image": "../../../../static/img/dessertcategories/cukriky.jpg"
        ,
        
          "categoryName": "NAHODNE",
          "image": "../../../../static/img/dessertcategories/nahodne.jpg"
        ,
      ]
    ,
    
      "title": "CANDY BAR",
      "path": "/candy-bar",
      "categoryItems": [
        
          "categoryName": "CHEESECAKY",
          "image": "../../../../static/img/dessertcategories/cheesecaky.jpg"
        ,
        
          "categoryName": "BEZLEPKOVÉ TORTY",
          "image": "../../../../static/img/dessertcategories/bezlepkove-torty.jpg"
        ,
      ]
    
  ]

GraphiQL 中的 GraphQL 查询

query Collections 
  allMockJson 
    edges 
      node 
        categories 
          categoryItems 
            categoryName
            image
          
          title
          path

GraphiQL 给我的响应


  "data": 
    "allMockJson": 
      "edges": [
        
          "node": 
            "categories": null
          
        ,
        
          "node": 
            "categories": null
          
        ,
        
          "node": 
            "categories": [
              
                "categoryItems": [
                  
                    "categoryName": "CHEESECAKY",
                    "image": "../../../../static/img/dessertcategories/cheesecaky.jpg"
                  ,
                  
                    "categoryName": "BEZLEPKOVÉ TORTY",
                    "image": "../../../../static/img/dessertcategories/bezlepkove-torty.jpg"
                  
                ],
                "title": "DEZERTY",
                "path": "/dezerty"
              ,
              
                "categoryItems": [
                  
                    "categoryName": "CUKRIKY",
                    "image": "../../../../static/img/dessertcategories/CUKRIKY.jpg"
                  ,
                  
                    "categoryName": "NAHODNE",
                    "image": "../../../../static/img/dessertcategories/NAHODNE.jpg"
                  
                ],
                "title": "CANDY BAR",
                "path": "/candy-bar"
              
            ]
          
        
      ]

我只希望获得 DEZERTY 和 CANDY BAR 部分。为什么会有空类别，我该如何解决？

提前致谢

【问题讨论】：

【参考方案1】：

您的 JSON 在对象 DEZERTY 和 CANDY BAR 中包含语法错误。它默默地失败而不告诉你。试试这个json linter。

Error: Parse error on line 12: , Error: Parse error on line 25: ,

再试一次。您的查询现在应该可以工作了。

您应该研究一个 IDE 来突出这些类型的错误并节省您的时间和挫败感。

【讨论】：

以上是关于GraphQL 查询从 JSON 数据源返回 GraphiQL 和 App 中的空对象的主要内容，如果未能解决你的问题，请参考以下文章

GraphQL：从 JSON 文件源完成查询

GraphQL从axios返回空数据[重复]