如何使用 gatsby 将数据从 graphQL 传递到 React 组件？答案

【问题标题】：How to pass Data from graphicQL to React component with gatsby?如何使用 gatsby 将数据从 graphQL 传递到 React 组件？
【发布时间】：2019-06-16 03:37:24
【问题描述】：

我正在尝试通过 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;

我预计某些东西会作为道具传递，但组件没有收到任何东西

【问题讨论】：

有错误吗？
嗯我认为问题在于它不是一个页面组件只是一个普通的，所以我需要使用？，我得到的消息是 TypeError: Cannot read property 'image1' of undefined
您尝试过使用静态查询吗？
还没做，看语法，给我看看？

标签： javascript reactjs gatsby graphiql

【解决方案1】：

查看docs for StaticQuery

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

【讨论】：