title: Can't loop array passed to component
body: <p>Hello dear Stack Overflow, I just started a Gatsby website but I'm having issues looping through an array passed to a component. </p>
  
  <h2>What I'm trying to do:</h2>
  
  <p>I have a Gatsby page called blog.js, in this page I have been showing blog titles retrived via GraphQL. Using a loop directly in the blog.js page I can see all the titles. </p>
  
  <p>My loop inside of blog.js looks like this </p>
  
  <pre class="lang-js prettyprint-override"><code>      &lt;div&gt; 
              &lt;h1&gt;Blogg data&lt;/h1&gt;
              {data.posts.edges.map (({ node }) =&gt; (
                  &lt;p&gt;{node.title}&lt;/p&gt;
              ))}
          &lt;/div&gt;  
  </code></pre>
  
  <p>It retrieves data from the following GraphQL query</p>
  
  <pre class="lang-js prettyprint-override"><code>export const query = graphql`
    query BlogPageQuery {
      posts: allSanityPost(
        limit: 12
        sort: { fields: [publishedAt], order: DESC }
      ) {
        edges {
          node {
            id
            publishedAt
            mainImage {
              asset {
                _id
              }
              alt
            }
            title
            _rawExcerpt
            slug {
              current
            }
          }
        }
      }
    }
  `
  
  </code></pre>
  
  <p>Instead of creating the blog posts previews in blog.js I instead want to use a component to do this. I've created a component called  BlogPostPreviewGrid and call it like this from blog.js </p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;BlogPostPreviewGrid blogPosts={data}/&gt;
  </code></pre>
  
  <p>My BlogPostPreviewGrid component currently looks like this </p>
  
  <pre class="lang-js prettyprint-override"><code>const BlogPostPreviewGrid = blogPosts =&gt; {
      return (
      &lt;div&gt;   
       &lt;p&gt;Here be component data&lt;/p&gt;
  
    {console.log(blogPosts)}
       {blogPosts.posts.edges.map (({ node }) =&gt; (
                  &lt;p&gt;{node.title}&lt;/p&gt;
              ))}
      &lt;/div&gt;
      )
  
  }
  export default BlogPostPreviewGrid
  </code></pre>
  
  <h2>What's not working:</h2>
  
  <p>I cannot loop through the data retrieved by the component, when running the loop I get a console error massage stating <code>blogPostPreviewGrid.js:13 Uncaught TypeError: Cannot read property 'edges' of undefined</code></p>
  
  <h2>What have I tried:</h2>
  
  <p>My first response was to console.log blogPosts, console.log shows the array object, I've attached a the array from Chromes console log </p>
  
  <pre><code>blogPostPreviewGrid.js:13 {blogPosts: {…}}blogPosts: posts: edges: Array(2)0: node: {id: "54fe241a-c7d4-50d2-be51-4403304ddc86", publishedAt: "2020-01-05T23:00:00.000Z", mainImage: {…}, title: "Testpost2", _rawExcerpt: Array(1), …}__proto__: Object1: {node: {…}}length: 
  </code></pre>
  
  <p>I've also written a conditional statement so that the component only tries to render the data if something exists in blogPosts and tried tweak the loop. I ended up with doing a git reset --hard so the conditional rendering is not present right now. </p>
  
  <p>Thank you for all replies!</p>