在React组件中时如何从GraphQL传递数据

Question

I have a Billboard component which is imported on my home page like so :

<Billboard id="successful_network_ebook_billboard"/>

The content of the component is :

import React, {Component} from "react";
import T from 'i18n-react'
import Link from "../components/LocalizedLink";
import Tank from "../components/Tank";
import CTA from "../components/CTA";
import Img from "gatsby-image"
import {graphql} from "gatsby"

import "../styles/css/components/Billboard.css";

class Billboard extends Component {
    successful_network_ebook_billboard = () => {
        return (
            <section id={this.props.id} className="Billboard">
                <Img className="bg" fluid={this.props.data.bgNetwork.childImageSharp.fluid} alt={this.props.alt}/>
                <Tank className="content">
                    <div className="text">
                        <h3>Title</h3>
                        <p>Paragraph</p>
                        <CTA to="/page">Click here</CTA>
                    </div>
                </Tank>
            </section>
        )
    }

    render() {
        switch (this.props.id) {
            /* There are more cases */
            case "successful_network_ebook_billboard":
                return (this.successful_network_ebook_billboard());
            default:
                return (
                    <div></div>
                )
        }
    }
}

export default Billboard

require("../queries/fragment.headers");

export const queryBillboardImages = graphql `
    query BillboardImages {
        bgNetwork: file(relativePath: { eq: "assets/images/healthcare/banner_soc2_bg.jpg" }) {
            ...fluidHeader
        }
    }
`

When I run the code, everything loads fine, except the image I'm trying to load via GraphQL. I get the message :

(Billboard, ) TypeError: Cannot read property 'bgNetwork' of undefined

Clearly "data" is empty, but I think I'm using the syntax that's proposed everywhere.

I tried getting this.data instead of this.props.data ; I get the same error.

I tried converting the component to a const which seemed to offer a more "direct" syntax, but I got a different, more esoteric error.

I want to know how to pass the result of the GrphQL call into my component. When I do it on a page, it's as simple as destructuring this.props.data into a constant and then it's ready to use. But when inside a component it doesn't seem to work that way.

If I do a

console.log(data)

all it returns me is the id and alt props that come from the parent.

Thank you for your help !

Answer 1

graphql query can only be used for Pages and not all components. For components you need to use StaticQuery component or with useStaticQuery with the latest version of react

export default (props) => (
  <StaticQuery
    query={graphql `
      query BillboardImages {
        bgNetwork: file(relativePath: { eq: "assets/images/healthcare/banner_soc2_bg.jpg" }) {
            ...fluidHeader
        }
    }
  `}
    render={data => (
      <Billboard  {...props} data={data}/>
    )}
  />
);

or using useStaticQuery

export default (props) => {
  const data = useStaticQuery(graphql `
      query BillboardImages {
        bgNetwork: file(relativePath: { eq: "assets/images/healthcare/banner_soc2_bg.jpg" }) {
            ...fluidHeader
        }
    }
  `)

  return (
    <Billboard  {...props} data={data}/>
  )
}