title: Gatsby/GraphQL using StaticQuery to retrieve local json data returns a null array first then my data
body: <p>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.</p>
  <p>navigationData.json</p>
  <pre><code>
  
  {
      &quot;navigationList&quot;: [
          {
              &quot;label&quot;: &quot;Home&quot;,
              &quot;link&quot; : &quot;/&quot;
          },
          {
              &quot;label&quot;: &quot;About&quot;,
              &quot;link&quot; : &quot;/about&quot;
          },
          {
              &quot;label&quot;: &quot;Portfolio&quot;,
              &quot;link&quot; : &quot;/portfolio&quot;
          },
          {
              &quot;label&quot;: &quot;Contact&quot;,
              &quot;link&quot; : &quot;/contact&quot;
          }
      ]
  }
  </code></pre>
  <p>Navigation.js</p>
  <pre><code>  import React, { useState, useEffect } from 'react';
  
  import { StaticQuery, graphql, Link } from &quot;gatsby&quot;;
  
  
  const Navigation = () =&gt; {
  
  
    const buildNavigationElements = (data) =&gt; {
        const itemsList = [];
        let temp = [];
  
        data.allDataJson.nodes.map(element =&gt; {
            if(element.navigationList !== null) {
              temp.push( ...element.navigationList )
            }
        });
  
        temp.map(element =&gt; {
          itemsList.push( 
                          &lt;li className=&quot;navigation-list__item&quot; key={element.label}&gt;
                            &lt;Link
                                    to={`${ element.link}`}&gt; { element.label } &lt;/Link&gt; 
                            &lt;/li&gt;
          )
        })
  
        return itemsList;
    }
  
    return (
      &lt;StaticQuery
          query={graphql`
            query QueryNavigationItems {
              allDataJson {
                nodes {
                  navigationList {
                    label
                    link
                  }
                }
              }
            }
          `}
  
        render={data =&gt; (
              &lt;nav className=&quot;navigation&quot;&gt;
                &lt;ul className=&quot;navigation-list&quot;&gt;
                  &lt;&gt;
                    { buildNavigationElements(data) }
                  &lt;/&gt;
                &lt;/ul&gt;
              &lt;/nav&gt;
        )}
      /&gt;
    )
  }
  
  
  export default Navigation
  
  </code></pre>
  <p>results :</p>
  <pre><code>{
    &quot;data&quot;: {
      &quot;allDataJson&quot;: {
        &quot;nodes&quot;: [
          {
            &quot;id&quot;: &quot;1e6022c3-3d65-5ad8-8f1f-fbb543638e0d&quot;,
            &quot;navigationList&quot;: [
              {
                &quot;label&quot;: &quot;Home&quot;,
                &quot;link&quot;: &quot;/&quot;
              },
              {
                &quot;label&quot;: &quot;About&quot;,
                &quot;link&quot;: &quot;/about&quot;
              },
              {
                &quot;label&quot;: &quot;Portfolio&quot;,
                &quot;link&quot;: &quot;/portfolio&quot;
              },
              {
                &quot;label&quot;: &quot;Contact&quot;,
                &quot;link&quot;: &quot;/contact&quot;
              }
            ]
          },
          {
            &quot;id&quot;: &quot;24d48863-68c7-577e-a346-24bfca24fc1f&quot;,
            **&quot;navigationList&quot;: null** &lt;----------Why?
          }
        ]
      }
    },
    &quot;extensions&quot;: {}
  }
  </code></pre>
  <p>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.</p>