javascript - 如何使用 gatsby 将数据从 graphicsQL 传递到 React 组件？

Question

我正在尝试通过 GraphicQL 将图像传递给我的 Banner 组件，这是一个片段组件。此代码在我的 index.js 中有效，但在我尝试创建新组件时不起作用。

我也尝试了类组件，但结果相同

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

const Banner = ({ data }) => (
    <div className="imageContainer">
         {console.log(data)}
            <Img fluid={data.image1.childImageSharp.fluid}/>
            <Img fluid={data.image2.childImageSharp.fluid}/>
            <Img fluid={data.image3.childImageSharp.fluid}/> 
    </div>
)

export const bannerImg = graphql`
   fragment bannerImg on File {
    childImageSharp {
      fluid{
        ...GatsbyImageSharpFluid
      }
    }
  }
`

export const query = graphql`
query {
    image1: file(relativePath: { eq: "images/one.jpg" }){
      ...bannerImg
    }

    image2: file(relativePath: { eq: "images/two.jpg" }){
      ...bannerImg
    }

    image3: file(relativePath: { eq: "images/three.jpg" }){
      ...bannerImg
    }
  }
`

export default Banner;

我希望某些东西可以作为道具传递，但组件没有收到任何东西

Answer 1

检查静态查询的文档

import React from 'react'
import { StaticQuery, graphql } from 'gatsby'
import Img from 'gatsby-image'

export const bannerImg = graphql`
   fragment bannerImg on File {
    childImageSharp {
      fluid{
        ...GatsbyImageSharpFluid
      }
    }
  }
`

const Banner () => (
  <StaticQuery
    query={graphql`
      query BannerQuery {
        image1: file(relativePath: { eq: "images/one.jpg" }){
          ...bannerImg
        }

        image2: file(relativePath: { eq: "images/two.jpg" }){
          ...bannerImg
        }

        image3: file(relativePath: { eq: "images/three.jpg" }){
          ...bannerImg
        }
      }
    `}
    render={data => (
      <div className="imageContainer">
        <Img fluid={data.image1.childImageSharp.fluid}/>
        <Img fluid={data.image2.childImageSharp.fluid}/>
        <Img fluid={data.image3.childImageSharp.fluid}/> 
      </div>
    )}
  />
)

export default Banner