gatsby-image получает реквизиты как неопределенные в компоненте

Question

Я могу получить данные изображения в GraphiQL, но не могу работать с компонентом. Пожалуйста, дайте мне знать, где я иду не так.

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

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

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

Answer 1

Я думаю, что это связано с тем, что ваш компонент не находится в папке 'pages' и поэтому не является страницей. Это верно? Использование запросов страниц в компонентах приведет к неопределенности данных.

В gatsby у вас есть запросов страниц (для страниц) и stati c запросов (для компоненты)

Answer 2

Ну, я не знаю точной причины этого, но я решил эту проблему, создав отдельный компонент для запроса изображения, а затем импортировав его, где требуется.

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

Answer 3

Как правило, у вас будет запрос с уникальным именем на каждом компоненте страницы, в противном случае я не уверен, знает ли Гэтсби, чтобы извлечь его и передать его разрешенное значение в качестве реквизита данных.

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