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

Question

当您想通过图形查询将图像带给我时，我会收到错误消息

无法查询类型为“ StrapiPropiedadesImagen”的字段“ childImageSharp”。

她不会让我带她去的。 这是我用来给我带来图像的查询，其他的是描述，id，wc，停车，价格，这些都毫无问题地带给我。 但是尝试带给我图像时我找不到问题。

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
          }
        }
      }        
    }
  }
}

`

我想在这里显示它：

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

您是否尝试过从查询中删除“尖锐”？就是这样：

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

Answer 2

您的 childImageSharp 正在返回一个 null 值，您甚至无法在 GraphQL 游乐场 (localhost:8000/___graphql) 中查询它，因此在您的组件中，您的代码已损坏。

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

imagen 永远不会获取显示 fluid 资产的数据，因为查询是 null。

答案很简单，您需要修复您的图像路径和文件系统，以允许 Gatsby（及其转换器）从您的 Strapi 图像创建可查询的节点，除非您不修复它，否则您将无法使用gatsby-image 使用这些资产。

Answer 3

你必须把它放在钩子文件中：

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

此外，如果您遇到相同的错误，您应该在图像 'propiedades' stripi type builder 中禁用多个图像