title: Stuck at "Cannot read property 'props' of undefined"
body: <p>I'm testing out the <code>gatsby-source-wordpress</code> plugin from <a href="https://www.gatsbyjs.org/packages/gatsby-source-wordpress/?=" rel="nofollow noreferrer">Gatsby</a>, and I'm trying to get my menu to fetch the links from my Wordpress site.</p>
  
  <p>I've managed to get all of the Wordpress schemas to come up in GraphiQL, and copied the GQL code from there.</p>
  
  <p>I've made a Layout component, where I've tried most of what I can to make it work. However, I keep getting <em>TypeError: Cannot read property 'props' of undefined</em> when I deploy my Gatsby site to localhost.</p>
  
  <p>Anyone ever come across this before? I'm kinda new to GraphQL and all that, so I honestly have no clue what's wrong, or if it's even GraphQL that's causing this. Any help is greatly appreciated! <em>(Sorry if this is a really simple fix, and I'm just being ignorant)</em></p>
  
  <p>I've searched through Google, Stack Overflow, Youtube, and anywhere else I could think of.</p>
  
  <h1>Code</h1>
  
  <h3>Layout</h3>
  
  <pre><code>import React, { Component } from "react";
  import PropTypes from "prop-types";
  import { StaticQuery, graphql } from "gatsby";
  // import Image from "gatsby"
  
  import Header from "../Header";
  import MainMenu from "../Nav";
  // import Aside from "../Aside"
  // import Footer from "../Footer";
  
  const Layout = ({ children }) =&gt; {
    const menu = this.props.data.allWordpressWpApiMenusMenusItems;
    return (
  
      &lt;StaticQuery
        query={graphql`
          query menuQuery {
            allWordpressWpApiMenusMenusItems {
              edges {
                node {
                  id
                  name
                  items {
                    title
                    object_slug
                    url
                  }
                }
              }
            }
          }
        `}
  
        render={menu =&gt; (
          &lt;&gt;
            &lt;Header&gt;
              &lt;MainMenu menu="{data.allWordpressWpApiMenusMenusItems}" /&gt;
            &lt;/Header&gt;
            &lt;div className="Layout"&gt;
              &lt;main&gt;{children}&lt;/main&gt;
            &lt;/div&gt;
            &lt;footer&gt;Footer&lt;/footer&gt;
          &lt;/&gt;
        )}
      /&gt;
    );
  };
  
  Layout.propTypes = {
    children: PropTypes.node.isRequired
  };
  
  export default Layout;
  
  </code></pre>
  
  <h3>Menu component</h3>
  
  <pre><code>import React, { Component } from "react";
  // import { Link } from "gatsby";
  
  class MainMenu extends Component {
    render() {
      const data = this.props.data.allWordpressWpApiMenusMenusItems;
      console.log(data);
  
      return (
        &lt;nav className="main-menu"&gt;
          &lt;ul&gt;
            &lt;p&gt;Test&lt;/p&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      );
    }
  }
  
  export default MainMenu;
  
  </code></pre>
  
  <p><strong>Expected result:</strong> The site renders on <code>localhost:8000</code><br/>
  <strong>Error messages I recieve:</strong></p>
  
  <pre class="lang-sh prettyprint-override"><code>src/components/Layout/index.js:11
     8 | // import Aside from "../Aside"
     9 | // import Footer from "../Footer";
    10 | 
  &gt; 11 | const Layout = ({ children }) =&gt; {
    12 |   const menu = this.props.data.allWordpressWpApiMenusMenusItems;
    13 |   return (
    14 |     &lt;StaticQuery
  </code></pre>