Gatsby-image obtenir des accessoires comme non défini dans le composant

Habituellement, vous auriez une requête nommée de manière unique sur chaque composant de page, sinon je ne sais pas si Gatsby sait de l'extraire et de passer sa valeur résolue comme le transfert de données ou non.

import React from "react";
import { graphql } from "gatsby";
import Img from "gatsby-image"

export default function Landing({ data }) {
  console.log(data)
  return (
    <section id="landing" className="d-flex flex-column justify-content-around">
    </section >
  )
}

export const query = graphql`
  query LandingQuery {
    img: file(relativePath: {eq: "landing-women.jpg"}){
      childImageSharp{
        fluid{
          src
        }
      }
    }
  }
`;

Je pense que cela a à voir avec votre composant n'est pas dans le dossier "pages" et ne pas être une page. Est-ce exact? L'utilisation des requêtes de la page dans les composants entraînera l'indéfinie des données.

dans gatsby vous avez Page de page (pour les pages) et Queries statiques (pour composants)

Eh bien, je ne connais pas la raison exacte de celui-ci, mais j'ai résolu le problème en créant un composant séparé pour la requête d'image, puis l'importatez-la si nécessaire.

import React from "react";
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image";
const Image = () => {
  const data = useStaticQuery(graphql`
   query {
     img: file(relativePath: {eq: "landing-women.jpg"}){
       childImageSharp{
          fluid{
          ...GatsbyImageSharpFluid_tracedSVG
          }
       }
     }
    }
  `)

return <Img className="img-fluid order-0 order-md-1 col-12 col-md-7" 
  fluid= {data.img.childImageSharp.fluid} />
}

export default Image