How to Manage a Navigation Menu in NextJS with WordPress

[admin]

I'm building a NextJS app using headless WordPress with GraphQL. It's not clear from the documentation where I should be calling the query to create the site navigation.
<a href="https://github.com/lfades/next.js/tree/examples/cms-wordpress/examples/cms-wordpress" rel="noreferrer">https://github.com/lfades/next.js/tree/examples/cms-wordpress/examples/cms-wordpress</a>
The navigation is controlled dynamically by WordPress Menus (

Appearance > Menus

) on the backend and I can successfully access these

menuItems

via GraphQL without any issue on the

index.js

and

posts/[slug].js

page templates in Next JS.

// index.js
export default function Index({ primaryMenu = [] }) {
   return (
     <Layout>
         <Header> 
          {primaryMenu.map((item, index) => {
             return (<a href={item.url}>{item.label}</a>)
          )}
         </Header>
     </Layout>
   );

}

export async function getStaticProps() {
  const primaryMenu = await getPrimaryMenu(); // Get menu via GraphQL
  return {
    props: { primaryMenu },
  };
}

The issue I'm having with this is I am repeating the

getStaticProps

function on each template and I should be able to use some sort of global query for this, either in the

<header/>

component itself or another method. I'm unable to find documentation on how to do this and it doesn't work in components.
Any guidance (or examples) on where a global query such as a dynamic Navigation query would live in a NextJS app is appreciated.