title: Creating a react component for gatsby-image (and passing in props of filenames and sizes)
body: <p>I'm new to working with gatsby-image. </p>
  
  <p>I've got the example sample site up from gatsby/examples/using-gatsby-image/src/pages/ and it works locally using gatsby develop. </p>
  
  <p>There are two next steps:</p>
  
  <ol>
  <li><p>Hive off Img (and graphql queries) to another component and call that component from within blur-up.js - why? Because Img and graphql is verbose and doesn't match my current use of styled-components (it's inline)... and it allows the next step to take place (step 2).</p></li>
  <li><p>Once it's running as a component then the parent can pass some simple props to it (filename, size). This then means anytime you want a blur-up image you could put this in the parent.</p></li>
  </ol>
  
  <p>&lt;
      ImageInsert fsfile="michae" maxwidth="800"  /></p>
  
  <p>and let the component handle the graphql calls using (in this case michae as the regex for the imagefilename). </p>
  
  <h3>My problem is I can't even get step one going. </h3>
  
  <p>Here's what I do</p>
  
  <h2>REMOVE gatsby-image references from the parent file (blur-up.js) and ADD an import to a component that has the gatsby-image (./imageinsert)</h2>
  
  <pre><code>import React from "react"
  import ImageInsert from "./imageinsert"
  import { rhythm, options } from "../utils/typography"
  
  const BlurUp = () =&gt; (
    &lt;div&gt;
      &lt;h1&gt;Viribus quid&lt;/h1&gt;
      &lt;h2&gt;Hippason sinu&lt;/h2&gt;
  
  
      &lt;p&gt;
        Lorem markdownum nocens, est aut tergo, inmansuetique bella. Neve illud
        contrarius ad es prior.{` `}
        &lt;a href="http://nunc.io/fuit.html"&gt;Planguntur&lt;/a&gt; quondam, sua ferunt
        uterum semina advertere si fraudesque terram hosti subiecta, nec. Audenti
        refugitque manibusque aliis infelicem sed mihi aevis! Que ipso templa; tua
        triformis animumque ad coluit in aliquid.
      &lt;/p&gt;
      &lt;ul&gt;
        &lt;li&gt;Infamia lumina sequuntur ulla&lt;/li&gt;
        &lt;li&gt;Aquarum rutilos&lt;/li&gt;
        &lt;li&gt;Hinc vimque&lt;/li&gt;
      &lt;/ul&gt;
      &lt;h2&gt;Et solebat pectus fletus erat furit officium&lt;/h2&gt;
      &lt;p&gt;
        Proteus ut dis nec exsecrantia data: agrestes, truculenta Peleus. Et
        diffidunt, talia intravit Thaumantias; figere et &lt;em&gt;et&lt;/em&gt; qui socio
        qui, &lt;a href="http://vixmonet.io/in.html"&gt;tuo servet unda&lt;/a&gt; hoc{` `}
        &lt;strong&gt;classi&lt;/strong&gt;? Causam &lt;em&gt;quemque&lt;/em&gt;? Subigebant cornibus
        fibras ut per nare nati, cunctis et &lt;strong&gt;illa verba&lt;/strong&gt; inrita.
      &lt;/p&gt;
      &lt;ol&gt;
        &lt;li&gt;Furori adacto&lt;/li&gt;
        &lt;li&gt;Nocent imagine precari id ante sic&lt;/li&gt;
        &lt;li&gt;Ipsos sine Iuno placabitis silet relinquent blandarum&lt;/li&gt;
        &lt;li&gt;Et pars tabe sociorum et luna illum&lt;/li&gt;
        &lt;li&gt;Et frustra pestifero et inquit cornua victa&lt;/li&gt;
        &lt;li&gt;Constitit nomine senta suspirat et signis genuisse&lt;/li&gt;
      &lt;/ol&gt;
  
      &lt;h2&gt;Levia mihi&lt;/h2&gt;
      &lt;p&gt;
        Precor Ortygiam, prudens diro stabant prodis moenia; aut tergo{` `}
        &lt;a href="http://orehaec.io/"&gt;loquax et data&lt;/a&gt; sua rite in vulnere. Esse
        lumina plaustrum lacus necopina, iam umbrae nec clipeo sentit{` `}
        &lt;a href="http://ut.org/hinc"&gt;sinistra&lt;/a&gt;.
      &lt;/p&gt;
      &lt;ImageInsert/&gt;
      &lt;p&gt;
        Pendebat nitidum vidistis ecce crematisregia fera et lucemque crines.{` `}
        &lt;a href="http://www.sub.net/"&gt;Est sopita satis&lt;/a&gt; quod harena
        Antimachumque tulit fusile. Fieri qui que prosit equidem, meis praescia
        monebat cacumina tergo acerbo saepe nullaque.
      &lt;/p&gt;
    &lt;/div&gt;
  )
  
  export default BlurUp
  </code></pre>
  
  <h2>NOW ADDING imageinsert.js I start with something simple (just add a h1 line)</h2>
  
  <p>and it works:</p>
  
  <pre><code>import React from "react"
  import Img from "gatsby-image"
  
  export default ({ data }) =&gt; (
    &lt;div&gt;
      &lt;h1&gt;Hello gatsby-image&lt;/h1&gt;
    &lt;/div&gt;
  )
  </code></pre>
  
  <p>my browser shows this inserted: </p>
  
  <h1>Hello gatsby-image</h1>
  
  <p><a href="https://i.stack.imgur.com/adEXz.png" rel="nofollow noreferrer">so far, so good, the component is inserted</a></p>
  
  <p>So all I need to do now is enable the gatsby-image tag (Img) and graphql query. I try various options (see uncommented and commented below). But when I do this I get a blank page (browser) and console errors suggesting a null:</p>
  
  <pre><code>TypeError: Cannot read property 'file' of undefined
      at new _default (imageinsert.js:7)
  </code></pre>
  
  <p>Here's some variations I tried:</p>
  
  <pre><code>import React from "react"
  import Img from "gatsby-image"
  
  export default ({ data }) =&gt; (
    &lt;div&gt;
      &lt;h1&gt;Hello gatsby-image&lt;/h1&gt;
      &lt;Img resolutions={data.file.childImageSharp.resolutions} /&gt;
    &lt;/div&gt;
  )
  
  // export const query = graphql`
  //     query ImageInsertQuery {
  //       imageSharp(id: { regex: "/nasa/" }) {
  //       sizes(maxWidth: 1500) {
  //         ...GatsbyImageSharpSizes
  //       }
  //     }
  //   }
  // `
  
  
  export const query = graphql`
    query GatsbyImageSampleQuery {
      file(relativePath: { eq: "images/nasa-45072.jpg"}) {
        childImageSharp {
          resolutions(width: 125, height: 125) {
            ...GatsbyImageSharpResolutions
          }
        }
      }
    }
  `
  
  
  
  
  // class ImageInsert extends React.Component {
  //   render() {
  //     return (
  //       &lt;div&gt;
  //         {/* &lt;Img
  //         title={`Photo of Michael`}
  //           sizes={this.props.data.imageSharp.sizes}
  //         /&gt; */}
  //         &lt;h1&gt;mg is here &lt;/h1&gt;
  //       &lt;/div&gt;
  //     )
  //   }
  // }
  //
  // export default ImageInsert
  //
  // export const query = graphql`
  //     query ImageInsertQuery {
  //       imageSharp(id: { regex: "/nasa/" }) {
  //       sizes(maxWidth: 1500) {
  //         ...GatsbyImageSharpSizes
  //       }
  //     }
  //   }
  // `
  //
  
  
  // const ImageInsert = ({ data }) =&gt; (
  //   &lt;div&gt;
  //     &lt;h1&gt;yayness {data.mgImage.sizes}&lt;/h1&gt;
  //     {/* &lt;Img
  //       sizes={data.mgImage.sizes}
  //       title={`Photo of Michael`}
  //     /&gt; */}
  //   &lt;/div&gt;
  // )
  //
  // export default ImageInsert
  //
  </code></pre>
  
  <p>None work for me. Anytime I put in the Img I get a blank page.  Unfortunately I haven't got access to any other examples. The examples from <a href="https://www.gatsbyjs.org/packages/gatsby-image/" rel="nofollow noreferrer">https://www.gatsbyjs.org/packages/gatsby-image/</a> have a typo @ - an (L) instead of (1) for the width (it's l25 instead of 125) so I am not sure if anyone has examples of what i am trying to do? Or advice on how to get this into another component. </p>
  
  <pre><code>file(relativePath: { eq: "images/an-image.jpeg"}) {
        childImageSharp {
          resolutions(width: l25, height: 125) {
  </code></pre>