您的 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

您的childImageSharp正在返回null值，您甚至無法在 GraphQL 操場（ localhost:8000/___graphql ）中查詢它，因此在您的組件中，您的代碼正在中斷。

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

由於查詢是null ，因此imagen永遠不會獲取數據來顯示fluid資產。

答案很簡單，您需要修復圖像路徑和文件系統，以允許 Gatsby（及其轉換器）從您的 Strapi 圖像創建可查詢節點，直到您不修復它，您將無法使用gatsby-image與這些資產。

Answer 2

您是否嘗試過從查詢中刪除“尖銳”？ 像這樣：

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

Answer 3

你必須把它放在鈎子文件中：

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

而且，如果您遇到相同的錯誤，您應該在圖像“propiedades”strapi 類型構建器中禁用多個圖像