title: how to show media content from contentful using gatsby
body: <p>Going through <a href="https://www.youtube.com/watch?v=8t0vNu2fCCM&amp;" rel="nofollow noreferrer">Andrew Mead's gatsby tutorial</a>. I have my contentful model set up with a media field for the hero image. The rich text and text fields work fine. In my index page I want each post to show up with a thumbnail of the hero image. My graphql query looks like this, and you can see <strong>heroImage</strong> in there, which works fine in the graphql playground:</p>
  
  <pre><code>  const data = useStaticQuery(graphql`
      query {
        allContentfulWork(sort: { fields: publishedDate, order: DESC }) {
          edges {
            node {
              title
              slug
              publishedDate(formatString: "MMMM Do, YYYY")
              heroImage {
                file {
                  url
                }
              }
            }
          }
        }
      }
    `)
  </code></pre>
  
  <p>^^This works in graphql playground. And below in index.js I'm returning:</p>
  
  <pre><code>return (
      &lt;Layout&gt;
        &lt;ul className={workStyles.indexPage}&gt;
          {data.allContentfulWork.edges.map(edge =&gt; {
            return (
              &lt;li&gt;
                &lt;Link to={`/work/${edge.node.slug}`}&gt;
                  &lt;h3&gt;{edge.node.title}&lt;/h3&gt;
                  {edge.node.publishedDate}
                  &lt;img src={edge.node.heroImage.file.url} /&gt;
                &lt;/Link&gt;
              &lt;/li&gt;
            )
          })}
        &lt;/ul&gt;
      &lt;/Layout&gt;
    )
  </code></pre>
  
  <p>the issue is <strong>{edge.node.heroImage.file.url}</strong> returns an error, <code>TypeError: Cannot read property 'file' of null</code>. </p>
  
  <p>how can I embed that image?</p>