Gatsby Contentful Query Cannot Query fluid image?

Question

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 "fluid". 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?

import React from "react"
import { Link, useStaticQuery, graphql } from "gatsby"

import projectStyles from "../styles/projects.module.scss"
import Img from "gatsby-image"


const Project = () => {
    const data = useStaticQuery(graphql`
      query {
        allContentfulProject(sort: { fields: publishedDate, order: DESC } ) {
          edges {
            node {
              title
              slug
              logline
              stackList
              publishedDate (formatString:"YYYY")
              code
              liveLink
              image {
                title
                fluid(maxWidth:450) {
                  sizes
                  src
                  srcSet
                  srcWebp
                  srcSetWebp
                  ...GatsbyContentfulFluid
                }
              }
            }
          }
        }
      }
    `)
  
    console.log(data)


return (
    <section>
    <ol className={projectStyles.posts}>
      {data.allContentfulProject.edges.map((edge) => {
        return (
            <li className={projectStyles.post}>
                <div className={projectStyles.previewImage}>
                  <Img
                    fluid={edge.node.image.fluid}
                    alt={edge.node.image.title}
                  />
                </div>
                <div className={projectStyles.info}>
                  <p>{edge.node.publishedDate}</p>
                  <div className={projectStyles.headline}>
                    <h2>{edge.node.title}: <h3>{edge.node.logline}</h3></h2>
                  </div>
                  <p>{edge.node.stackList}</p>
                  <div className={projectStyles.buttons}>
                    <Link to={`${edge.node.code}`} class={projectStyles.button}>Code</Link>
                    <div class={projectStyles.divider}></div>
                    <Link to={`${edge.node.liveLink}`} class={projectStyles.button}>Live</Link>
                  </div>
                </div>

            </li>
        )
      })}
    </ol>
    </section>
)
  }
  
  export default Project

Gatsby has made major modifications in the way images work on latest updates. You can read more [here](https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image). — ivanatias, Jun 29 '22 at 19:57
Okay thank you! I just read it. Is it possible to have the size of the image decided by the CSS like with the Fluid query? Or am I misunderstanding completely? — kenton, Jun 30 '22 at 20:59
You can query for all the sizes for your image in order to make it responsive. But yes, you can also apply CSS classes to it. — ivanatias, Jun 30 '22 at 21:15

score 0 · Answer 1 · answered Jul 09 '22 at 16:32

You are mixing gatsby-image (until Gatsby v2) with gatsby-plugin-image (from Gatsby v3 onwards).

Since the first one is deprecated, I'd suggest following the gatsby-plugin-image approach. In this case, you will need to change and restructure your query (check it at localhost:8000/___graphql).

Is it possible to have the size of the image decided by the CSS like with the Fluid query? Or am I misunderstanding completely?

As you can see in the docs, you can use the layout property to set your desired layout (fixed, fluid or constrained). In this Gatsby image component, you don't need to specify the type of image per se.

Gatsby Contentful Query Cannot Query fluid image?

1 Answers1