Как передать данные из graphicQL в компонент React с помощью gatsby? - PullRequest
Новая
       47

Как передать данные из graphicQL в компонент React с помощью gatsby?

0 голосов
/ 15 июня 2019

Я пытаюсь передать изображения через GraphicQL моему компоненту Banner, который является компонентом фрагмента. Этот код работал в моем index.js, но не работает, когда я пытаюсь создать новый компонент.

Я пытался с классом Componentnt Aswell, но тот же результат 

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;

Я ожидал, что что-то проходит как реквизиты, но компонент ничего не получает

1 Ответ

0 голосов
/ 15 июня 2019

Проверьте документы для 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
...