Creating a dynamic Navigation menu ( submenu included!) with StaticQuery

Question

I'm trying to render dynamically my navigation menu. Unfortunately all I get is an empty field, even though I can get the correct data on my graphQL. this is my first time publicly requesting help. I hope this first post provides all the necessary information so that more talented developers can help me in my ask. :b

My site is live on: https://metsanotus.netlify.app/ and you can see that the ul that has {menuLinks} inside is empty.

Here is what my graphQl structure is:

query menuItems {
        site {
          siteMetadata {
            MenuLinks {
              link
              title
              subMenu {
                link
                title
              }
            }
          }
        }
      }

And I do get the specific data that I want to retrieve.:

{
  "data": {
    "site": {
      "siteMetadata": {
        "MenuLinks": [
          {
            "link": "/",
            "title": "Etusivu",
            "subMenu": null
          },
          {
            "link": "/metsan-otus",
            "title": "Minusta",
            "subMenu": null
          },
          {
            "link": "/vlogi",
            "title": "Vlogi",
            "subMenu": [
              {
                "link": "/vlogi/kirjakerho/",
                "title": "Kirjakerho"
              },
              {
                "link": "/vlogi/elamankoulu/",
                "title": "Elämänkoulu"
              },
              {
                "link": "/vlogi/saarnakirja/",
                "title": "Saarnakirja"
              },
              {
                "link": "/vlogi/hunajapurkki/",
                "title": "Hunajapurkki"
              },
              {
                "link": "/vlogi/pelihalli/",
                "title": "Pelihalli"
              },
              {
                "link": "/vlogi/karhuteatteri/",
                "title": "Karhuteatteri"
              }
            ]
          },
          {
            "link": "/yhteydenotto",
            "title": "Ota yhteyttä",
            "subMenu": null
          }
        ]
      }
    }
  },
  "extensions": {}
}

^^ This data is set up on my gatsby-config.js inside my siteMetaData object under MenuLinks object.

These are my two attempts at trying to map my menu: https://gist.github.com/otsolap/9bf186db6793bdcf721d520a45336e09 https://gist.github.com/otsolap/e9935bf4de44c17ab3f91e352229db81

Here is the code from the first gist, just to show an example:

`import React from "react"
import { graphql, StaticQuery, Link } from "gatsby"
import Nav from "react-bootstrap/Nav"
import Navbar from "react-bootstrap/Navbar"
import NavDropdown from "react-bootstrap/NavDropdown"

function menuLinks() {
  return (
    <StaticQuery
      query={graphql`
      query menuItems {
        site {
          siteMetadata {
            MenuLinks {
              link
              title
              subMenu {
                link
                title
              }
            }
          }
        }
      }
      `}
      render={data => (
        <ul>
          {data.site.siteMetadata.MenuLinks.map((path) => (
            <Nav.Link as="li" key={path.title}>
              <Link
                to={path.link}
              >
                {path.title}
              </Link>
              {path.subMenu && path.subMenu.length > 0 ? (
                <NavDropdown class="sub-items responsive-navbar-nav">
                  {path.subMenu.map((subpath) => (
                    <NavDropdown.Item a href={subpath.link}>
                      {subpath.title}
                    </NavDropdown.Item>
                  ))}
                </NavDropdown>
              ) : null}
            </Nav.Link>))
          }</ul>
      )}
    />
  )
}


class Navigation extends React.Component {
  render() {
    return (
      <Navbar collapseOnSelect expand="md" className="site-navigation">
        <Navbar.Brand class="logo" href="/">Metsän Otus</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <ul>
            {menuLinks}
          </ul>
        </Navbar.Collapse>
      </Navbar >
    )
  }
}


export default Navigation`

I think i'm very close to getting this done correct but am missing a small piece of crucial code.... Could some kind chap help a junior dev out? :b

Answer 1

I believe you are looking for something like:

import React from 'react';
import { graphql, StaticQuery, Link } from 'gatsby';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';

function menuLinks () {
  return (
    <StaticQuery
      query={graphql`
      query menuItems {
        site {
          siteMetadata {
            MenuLinks {
              link
              title
              subMenu {
                link
                title
              }
            }
          }
        }
      }
   `} render={data => (
        <ul>
          {data.site.siteMetadata.MenuLinks.map((path) => (
            <Nav.Link as='li' key={path.title}>
              <Link to={path.link}>
                {path.title}
              </Link>
              {path.subMenu &&  (
                <NavDropdown class='sub-items responsive-navbar-nav'>
                  {path.subMenu.map((subpath) => (
                    <NavDropdown.Item a href={subpath.link}>
                      {subpath.title}
                    </NavDropdown.Item>
                  ))}
                </NavDropdown>
              )}
            </Nav.Link>))
          }</ul>
      )}
    />
  );
}

class Navigation extends React.Component {
  render () {
    return (
      <Navbar collapseOnSelect expand='md' className='site-navigation'>
        <Navbar.Brand class='logo' href='/'>Metsän Otus</Navbar.Brand>
        <Navbar.Toggle aria-controls='responsive-navbar-nav' />
        <Navbar.Collapse id='responsive-navbar-nav'>
          <ul>
            {menuLinks()}
          </ul>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

export default Navigation;

Notice the function call ( {menuLinks()} ) (the crucial small piece you said) and the removal of some redundant conditions like path.subMenu && path.subMenu.length > 0 , since path.subMenu it's a falsy value and will work for this use-case.