Пункты подменю Gatsby + WordPress CMS без головы

Question

Мне трудно создавать элементы подменю для моего меню WordPress на моем сайте Gatsby. Он продолжает выдавать мне ошибку: «TypeError: Невозможно прочитать свойство 'map' of undefined".

Я пытался найти решение для элементов подменю в моей безголовой установке WordPress. До сих пор я нашел старый пост SO , но решение, похоже, не работает, когда я тестирую. Я также пытался создать отдельный файл и затем импортировать его на страницу с помощью импорта, но это тоже не получилось.

import React from 'react';
import { graphql, StaticQuery, Link } from 'gatsby';

const MainMenu = () => (
  <StaticQuery query={graphql`{
    allWordpressWpApiMenusMenusItems {
      edges {
        node {
          items {
            title
            object_slug
            url
             wordpress_children {
          title
          object_slug
          url
            }
          }
        }
      }
    }
  }
      `} render={props => (
      <ul className="menu">
        {
          props.allWordpressWpApiMenusMenusItems.edges[0].node.items.map(item => (
            <li><Link to={`/${item.url}`} key={item.object_slug}>
              {item.title}
            </Link></li>
          ))
        }
        <ul className="submenu">
          {props.allWordpressWpApiMenusMenusItems.edges[0].node.items.wordpress_children.map(subitem => (
            <li><Link to={`/${subitem.url}`} key={subitem.object_slug}>
              {subitem.title}
            </Link></li>
          ))
          }
        </ul>
      </ul >
    )} />
);

export default MainMenu;

Answer 1

Мне удалось найти решение этой проблемы. Для всех, кто ищет решение для элементов подменю на сайте WordPress / Gatsby, это помогло мне:

import React from "react"
import { StaticQuery, graphql, Link } from "gatsby"

export default () => (
  <StaticQuery
    query={graphql`
      query {
        allWordpressWpApiMenusMenusItems {
          edges {
            node {
              slug
              name
              items {
                title
                url
                object_slug
                wordpress_children {
                  title
                  url
                }
              }
            }
          }
        }
      }
    `}
    render={data => {
      return (
        <ul className="menu">
          {data &&
            data.allWordpressWpApiMenusMenusItems &&
            data.allWordpressWpApiMenusMenusItems.edges &&
            data.allWordpressWpApiMenusMenusItems.edges[0] &&
            data.allWordpressWpApiMenusMenusItems.edges[0].node &&
            data.allWordpressWpApiMenusMenusItems.edges[0].node.items &&
            data.allWordpressWpApiMenusMenusItems.edges[0].node.items.map(
              prop => {
                return (
                  <li>
                    <Link
                      to={prop.url}
                      alt={prop.title}
                    >
                      {prop.title}
                    </Link>
                    <ul className="sub-menu">
                      {prop &&
                        prop.wordpress_children &&
                        prop.wordpress_children.map(child => {

                          return (
                            <li> <Link
                              className="dropdown-item"
                              to={child.url}
                              alt={child.title}
                            >
                              {child.title}
                            </Link></li>
                          )
                        })}
                    </ul>
                  </li>
                )
              }
            )}
        </ul>
      )
    }}
  />
)