CODEWITHSUNDEEP
reactjsgraphqlgatsby
LeKevoid
LeKevoid

Reputation: 456

How to pass data from GraphQL when in a React Component

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 !

Upvotes: 1

Views: 1632

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281626

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}/>
  )
}

Upvotes: 2

Related Questions