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

Question

我正在尝试通过 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 部分。为什么有空类别，我该如何解决？

提前致谢

Answer 1

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

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

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

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

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

GraphQL Query returns null objects both in GraphiQL and App from JSON data source

json

graphql

gatsby

graphiql