title: Gatsby Contentful Query Cannot Query fluid image?
body: <p>I'm trying to set up a component of my portfolio that lists all my projects next to a fluid image (gif) of them working. I made this page before in gatsby v2 using this exact code.
  However, graphql playground is saying that it's unable to query field &quot;fluid&quot;. I've never had this issue, before and I'm very confused. I've loaded gatsby image into my config. And I'm loading gatsby image into the component. Does anyone know how to fix this issue?</p>
  <pre><code>import React from &quot;react&quot;
  import { Link, useStaticQuery, graphql } from &quot;gatsby&quot;
  
  import projectStyles from &quot;../styles/projects.module.scss&quot;
  import Img from &quot;gatsby-image&quot;
  
  
  const Project = () =&gt; {
      const data = useStaticQuery(graphql`
        query {
          allContentfulProject(sort: { fields: publishedDate, order: DESC } ) {
            edges {
              node {
                title
                slug
                logline
                stackList
                publishedDate (formatString:&quot;YYYY&quot;)
                code
                liveLink
                image {
                  title
                  fluid(maxWidth:450) {
                    sizes
                    src
                    srcSet
                    srcWebp
                    srcSetWebp
                    ...GatsbyContentfulFluid
                  }
                }
              }
            }
          }
        }
      `)
    
      console.log(data)
  
  
  return (
      &lt;section&gt;
      &lt;ol className={projectStyles.posts}&gt;
        {data.allContentfulProject.edges.map((edge) =&gt; {
          return (
              &lt;li className={projectStyles.post}&gt;
                  &lt;div className={projectStyles.previewImage}&gt;
                    &lt;Img
                      fluid={edge.node.image.fluid}
                      alt={edge.node.image.title}
                    /&gt;
                  &lt;/div&gt;
                  &lt;div className={projectStyles.info}&gt;
                    &lt;p&gt;{edge.node.publishedDate}&lt;/p&gt;
                    &lt;div className={projectStyles.headline}&gt;
                      &lt;h2&gt;{edge.node.title}: &lt;h3&gt;{edge.node.logline}&lt;/h3&gt;&lt;/h2&gt;
                    &lt;/div&gt;
                    &lt;p&gt;{edge.node.stackList}&lt;/p&gt;
                    &lt;div className={projectStyles.buttons}&gt;
                      &lt;Link to={`${edge.node.code}`} class={projectStyles.button}&gt;Code&lt;/Link&gt;
                      &lt;div class={projectStyles.divider}&gt;&lt;/div&gt;
                      &lt;Link to={`${edge.node.liveLink}`} class={projectStyles.button}&gt;Live&lt;/Link&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/li&gt;
          )
        })}
      &lt;/ol&gt;
      &lt;/section&gt;
  )
    }
    
    export default Project
  </code></pre>