title: how to display data from graphql query Gatsbyjs?
body: <p>I need some help here. I am using Gatsbyjs and contentful. I have queried the data using graphql. I can see the object but i can't seem to display it in a div. What am I missing here ? The error keeps saying can't read undefined properties of map. Is there another way of doing this ? The content includes text, image and an mp3. Let me know what I am missing here.</p>
  <p>This is the code</p>
  <pre><code>const IndexPage = ({data}) =&gt; {
    
    console.log(data);
    
    return (
      &lt;div&gt;
      {data.edges.map(edge =&gt; &lt;p key={edge} &gt;{edge}&lt;/p&gt;)}
      &lt;/div&gt;
        )
  }
  
  export const query = graphql `
  query MyQuery {
    allContentfulPodcast {
      edges {
        node {
          title
          thumbnail {
            file {
              details {
                image {
                  height
                  width
                }
                size
              }
              fileName
              url
            }
          }
          video {
            file {
              fileName
              url
            }
          }
        }
      }
    }
  }
  </code></pre>
  <p>console log object</p>
  <pre><code>{
      &quot;allContentfulPodcast&quot;: {
          &quot;edges&quot;: [
              {
                  &quot;node&quot;: {
                      &quot;title&quot;: &quot;Welcome to our show&quot;,
                      &quot;thumbnail&quot;: {
                          &quot;file&quot;: {
                              &quot;details&quot;: {
                                  &quot;image&quot;: {
                                      &quot;height&quot;: 5304,
                                      &quot;width&quot;: 7952
                                  },
                                  &quot;size&quot;: 4752704
                              },
                              &quot;fileName&quot;: &quot;business.jpg&quot;,
                              &quot;url&quot;: &quot;//images.ctfassets.net/hi3b2mc578jm/3wxzzKv4Rblsv1FAUR2SQ/d8f09ade7e9fc57afa2f425bb2da9ed5/business.jpg&quot;
                          }
                      },
                      &quot;video&quot;: {
                          &quot;file&quot;: {
                              &quot;fileName&quot;: &quot;watch&quot;,
                              &quot;url&quot;: &quot;//assets.ctfassets.net/hi3b2mc578jm/4kK38bwyJRxPYoM3SADQrU/4b11d4079052f651685a407c7fc6ecb4/watch&quot;
                          }
                      }
                  }
              }
          ]
      }
  }
  </code></pre>