title: How to pass data from GraphQL when in a React Component
body: <p>I have a Billboard component which is imported on my home page like so :</p>
  
  <pre><code>&lt;Billboard id="successful_network_ebook_billboard"/&gt;
  </code></pre>
  
  <p>The content of the component is :</p>
  
  <pre><code>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 = () =&gt; {
          return (
              &lt;section id={this.props.id} className="Billboard"&gt;
                  &lt;Img className="bg" fluid={this.props.data.bgNetwork.childImageSharp.fluid} alt={this.props.alt}/&gt;
                  &lt;Tank className="content"&gt;
                      &lt;div className="text"&gt;
                          &lt;h3&gt;Title&lt;/h3&gt;
                          &lt;p&gt;Paragraph&lt;/p&gt;
                          &lt;CTA to="/page"&gt;Click here&lt;/CTA&gt;
                      &lt;/div&gt;
                  &lt;/Tank&gt;
              &lt;/section&gt;
          )
      }
  
      render() {
          switch (this.props.id) {
              /* There are more cases */
              case "successful_network_ebook_billboard":
                  return (this.successful_network_ebook_billboard());
              default:
                  return (
                      &lt;div&gt;&lt;/div&gt;
                  )
          }
      }
  }
  
  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
          }
      }
  `
  </code></pre>
  
  <p>When I run the code, everything loads fine, except the image I'm trying to load via GraphQL. I get the message :</p>
  
  <pre><code>(Billboard, ) TypeError: Cannot read property 'bgNetwork' of undefined
  </code></pre>
  
  <p>Clearly "data" is empty, but I think I'm using the syntax that's proposed everywhere.</p>
  
  <p>I tried getting <strong>this.data</strong> instead of <strong>this.props.data</strong> ; I get the same error.</p>
  
  <p>I tried converting the component to a <strong>const</strong> which seemed to offer a more "direct" syntax, but I got a different, more esoteric error.</p>
  
  <p>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.</p>
  
  <p>If I do a</p>
  
  <pre><code>console.log(data)
  </code></pre>
  
  <p>all it returns me is the <strong>id</strong> and <strong>alt</strong> props that come from the parent.</p>
  
  <p>Thank you for your help !</p>