Nextjs - Children in WPGraphQL query for menus are null

Question

WPGraphiQL IDE displays correct data like this:

but when I make the same query with Apollo Client on the Front-End the children of menu returns null.

Getting data with query

import { useApollo } from "../lib/apolloClient";
import { initializeApollo } from "../lib/apolloClient";
import { gql } from "@apollo/client";
function CustomApp({ pageProps, Component, props }) {
  const apolloClient = useApollo(pageProps.initialApolloState);
  return (
    <>
      {console.log(props)}
    </>
  );
}

CustomApp.getInitialProps = async () => {
  const apolloClient = initializeApollo();

  await apolloClient.query({
    query: gql`
      {
        menu(id: 2, idType: DATABASE_ID) {
          id
          databaseId
          name
          slug
          menuItems {
            nodes {
              databaseId
            }
          }
        }
      }
    `,
  });

  return {
    props: {
      initialApolloState: apolloClient.cache.extract(),
    },
  };
};

Console:

https://i.stack.imgur.com/UdMVY.png

All other nodes return children without any problem.

Answer 1

WPGraphQL will return null for menus when queried externally (but they will work fine in GraphiQL) if the menu is not assigned to a menu location in the theme. Go from the Edit Menus tab to the Manage Locations tab and assign the menu to a theme location. Otherwise it's almost like the menu is a draft, and isn't externally accessible.

Here is a bug report that helped me, and states the same solve: https://github.com/wp-graphql/wp-graphql/issues/1661