您的 GraphQL 查询中出现错误：无法在“StrapiPropiedadesImagen”类型上查询字段“childImageSharp”

Question

When you want to bring me the image with the graphics query, I get an error

Cannot query field "childImageSharp" on type "StrapiPropiedadesImagen".

And she won't let me bring her. This is the query that I use to try to bring me the image, the others as description, id, wc, parking, price brings it to me without any problem. But I can't find the problem when trying to bring me the image.

const usePropiedades = () => {const datos = useStaticQuery(graphql`
query {
  allStrapiPropiedades {
    nodes {
      nombre
      descripcion
      id
      wc
      precio
      estacionamiento
      habitaciones
      categorias {
        nombre
      }
      agentes {
        nombre
        Telefono
        email
      }
      imagen {
        sharp: childImageSharp {
          fluid(maxWidth: 600, maxHeight: 400) {
            ...GatsbyImageSharpFluid
          }
        }
      }        
    }
  }
}

`

And I want to show it here:

const PropiedadPreview = ({propiedad}) => {
const { nombre, descripcion, imagen, wc, estacionamiento, habitaciones, precio } = propiedad;
return (<Card> 
   <Image
    fluid={imagen.sharp.fluid} // Here I try to show
   />
   <Contenido>
   <h3>{nombre}</h3>
       <p className="precio">$ {precio} </p>

       <Iconos
       wc={wc}
       estacionamiento={estacionamiento}
       habitaciones={habitaciones}
       />
   </Contenido></Card>
);}

Answer 1

Your childImageSharp is returning a null value, you can't even query it in the GraphQL playground ( localhost:8000/___graphql ) so in your component, your code is breaking.

   <Image
    fluid={imagen.sharp.fluid} // Here I try to show
   />

imagen is never getting the data to display a fluid asset since the query is null .

The answer is simple, you need to fix your image path and filesystem to allow Gatsby (and its transformers) to create queryable nodes from your Strapi images, until you don't fix that, you won't be able to use gatsby-image with those assets.

Answer 2

Have you tried removing "sharp" from your query? Just like this:

imagen {
    childImageSharp {
      fluid(maxWidth: 600, maxHeight: 400) {
        ...GatsbyImageSharpFluid
      }
    }
  }        

Answer 3

You have to put this in the hooks file:

  imagen {
      sharp: childImageSharp {
           fluid( maxWidth: 600, maxHeight: 400 ){
               ...GatsbyImageSharpFluid_withWebp
           }
       }
  }

And also if you have the same error you should disable multiple images in the image 'propiedades' strapi type builder