title: Rendering Contentful single media type from list in React
body: <p>I'm trying to pull in data from my projects posts into another page to display selected projects and content. Within the project posts themselves (it was setup by another dev) they have a list of media types such as singleMedia, bannerMedia, accordionMedic etc, the way this is displayed on the project page is using a switch statement to detect what type of content is used in the array.</p>
  <p>Within my page I only want to see the singleMedia type of content as that is just the imagery/videos, but when I try and pull in the data although I have <code>console.log</code>'d the array and can see all of the url's and content, my app is still saying <code>Cannot read properties of undefined (reading 'file')</code>. In both my console log and GraphiQL query I can see all of the data I need, but it's not being picked up in my app for some reason.</p>
  <p>Below is my array map function, I have used the singleMedia checker to try and filter out any other mediaType, the array is within an array if that helps:</p>
  <pre><code>  {value.mainContent.map((block) =&gt; (
           &lt;Reveal
                fraction={ANIMATION.revealFraction}
                keyframes={customReveal}
                triggerOnce
           &gt;
                {block.singleMedia &amp;&amp; block.singleMedia.fluid ? (
                       &lt;Img key={block.id} fluid={block.singleMedia.fluid} /&gt;
                ) : (
                       &lt;Video
                           key={block.id}
                           autoPlay={true}
                           loop={true}
                           muted={true}
                           playsInline
                           src={block.singleMedia.file.url}
                       /&gt;
                )}
           &lt;/Reveal&gt;
        )
      )}
  </code></pre>
  <p>And below is my GraphQL Query:</p>
  <pre><code>    mainContent {
        ... on Node {
          ... on ContentfulProjectSingleMedia {
            id
            internal {
              type
            }
            singleMedia: media {
              file {
                url
              }
              fluid(maxWidth: 1440, resizingBehavior: SCALE) {
                ...GatsbyContentfulFluid
              }
            }
          }
        }
      }
  </code></pre>