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

Question

I'm trying to get my mocked JSON data via GraphQL in Gatsby. The response shows the correct data, but also two null objects as well. Why is it happening?

I'm using the gatsby-transformer.json plugin to query my data and gatsby-source-filesystem to point the transformer to my json files.

categories.json the mock file I'm trying to get to work :)

{
  "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"
        },
      ]
    }
  ]
}

GraphQL query in GraphiQL

query Collections {
  allMockJson {
    edges {
      node {
        categories {
          categoryItems {
            categoryName
            image
          }
          title
          path
        }
      }
    }
  }
}

And the response GraphiQL gives me

{
  "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"
              }
            ]
          }
        }
      ]
    }
  }
}

I expected only to get the DEZERTY and CANDY BAR sections. Why are there null categories and how do I fix it?

Thanks in advance

Answer 1

Your JSON contains syntax errors in the objects DEZERTY and CANDY BAR. It silently fails without telling you. Try this json linter.

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

Try again. Your query should work now.

You should look into an IDE that highlights these types of errors and saves you time and frustration.