Gatsby/GraphQL using StaticQuery to retrieve local json data returns a null array first then my data

Question

I'm fairly new using GraphQL and I'm unsure why this behavior is occurring. I have a file with an array of json objects, I query for and retrieve. I do get my data but it comes with a duplicate empty array in my results.

navigationData.json

{
    "navigationList": [
        {
            "label": "Home",
            "link" : "/"
        },
        {
            "label": "About",
            "link" : "/about"
        },
        {
            "label": "Portfolio",
            "link" : "/portfolio"
        },
        {
            "label": "Contact",
            "link" : "/contact"
        }
    ]
}

Navigation.js

  import React, { useState, useEffect } from 'react';

import { StaticQuery, graphql, Link } from "gatsby";


const Navigation = () => {


  const buildNavigationElements = (data) => {
      const itemsList = [];
      let temp = [];

      data.allDataJson.nodes.map(element => {
          if(element.navigationList !== null) {
            temp.push( ...element.navigationList )
          }
      });

      temp.map(element => {
        itemsList.push( 
                        <li className="navigation-list__item" key={element.label}>
                          <Link
                                  to={`${ element.link}`}> { element.label } </Link> 
                          </li>
        )
      })

      return itemsList;
  }

  return (
    <StaticQuery
        query={graphql`
          query QueryNavigationItems {
            allDataJson {
              nodes {
                navigationList {
                  label
                  link
                }
              }
            }
          }
        `}

      render={data => (
            <nav className="navigation">
              <ul className="navigation-list">
                <>
                  { buildNavigationElements(data) }
                </>
              </ul>
            </nav>
      )}
    />
  )
}


export default Navigation

results :

{
  "data": {
    "allDataJson": {
      "nodes": [
        {
          "id": "1e6022c3-3d65-5ad8-8f1f-fbb543638e0d",
          "navigationList": [
            {
              "label": "Home",
              "link": "/"
            },
            {
              "label": "About",
              "link": "/about"
            },
            {
              "label": "Portfolio",
              "link": "/portfolio"
            },
            {
              "label": "Contact",
              "link": "/contact"
            }
          ]
        },
        {
          "id": "24d48863-68c7-577e-a346-24bfca24fc1f",
          **"navigationList": null** <----------Why?
        }
      ]
    }
  },
  "extensions": {}
}

At first I thought it was something to do with Gatsby lifecyles but I run this on the GraphQL browser tool and still get the same null'd array. I've looked around for an explanation or a manner in which to filter this out using GraphQL unfortunately I haven't been able to accomplish this. Any information greatly appreciated.

Answer 1

For future people having this issue, A few things I ran into & learned when I accepted the first answer : Firstly this site retrieves data from a data folder using the plugins

1. gatsby-transformer-json
2. gatsby-source-filesystem

If you are receiving null'ed nodes when querying for your data check that your structure on your JSON files are done properly. I changed my previous file ( file pasted in question above ) to this :

navigationData.json

[
    {
        "label": "Home",
        "link" : "/"
    },
    {
        "label": "About",
        "link" : "/about"
    },
    {
        "label": "Portfolio",
        "link" : "/portfolio"
    },
    {
        "label": "Contact",
        "link" : "/contact"
    }
]

The file name is what is assigned to this data on Graphql and the array of objects do not need to be named. Naming them will cause null nodes to appear. This will force the developer to query using an id This querying by id will cause an issue later down the road if you are planning to push this on a server like Netlify as a Server Side Rendered site . Gatsby when pushed to Netlify as I'm currently doing will break when attempting to Publish your site. It will work fine on your machine and you will even have a successful build locally but when Published will break. The reason is because of the specific ids being queried for. I was able to solve this difficult issue when I started to read more and realized that id's have some short comings but also makes sense to keep it more general. I hope this helps and thank you for all who helped me