Component props to GraphQL

Question

I am building a simple web application using React and GatsbyJS, and I use NetlifyCMS to manage the content. Using gatsby-transformer-remark I load data containing path to the images I would like to load using gatsby-transformer-sharp.

So, I've created a Image component that recieves the path to its props:

<Image path={post.frontmatter.thumbnail} />

I want this component to get the path, ask for an gatsby-transformer-sharp node with GraphQL and then use the returned data in the gatsby-img component.

I am very new to both React and GatsbyJS, so obviously my solution doesn't work.

import React from 'react';
import Img from 'gatsby-image';

export default class Image extends React.Component {
  render() {
    return(
      <Img
        sizes={this.props.file.childImageSharp.sizes}
      />
    );
  }
}

export const getSizesQuery = graphql`
  query GatsbyImageSampleQuery($path: this.props.path) {
      file(relativePath: { eq: $path }) {
        childImageSharp {
          sizes {
            base64
            tracedSVG
            aspectRatio
            src
            srcSet
            srcWebp
            srcSetWebp
            sizes
            originalImg
            originalName
          }
        }
      }
    }
`;

What's the right way to do this?

you can go for `contentful` cms best suited for gats-by framework, if you want with contentful i have solution ? — yogesh agrawal, Jan 29 '18 at 16:00

score 1 · Answer 1 · answered Jan 29 '18 at 17:48

Although i cant your GraphQL type or your apollo?? setup (i recommend to run queries to test how you get your data with graphiql or Apollo client dev tool or something similar first that you see how your data is resolved from graphql), but your code should be something like this ..

import React from 'react';
import Img from 'gatsby-image';
import { gql, graphql } from 'react-apollo'; //Apollo client

class Image extends React.Component {
  render() {
    return(
      <Img 
       // get access to the graphql data with this.props.data
        sizes={this.props.data.file.childImageSharp.sizes} 

      />
    );
  }
}

   const getSizesQuery = gql`
    query GatsbyImageSampleQuery($path: ID!) {
      file(relativePath: $path) {
        childImageSharp {
          sizes {
            base64
            tracedSVG
            aspectRatio
            src
            srcSet
            srcWebp
            srcSetWebp
            sizes
            originalImg
            originalName
          }
        }
      }
    }
`;

const ImageWithData =  graphql(getSizesQuery , {
  name : 'selectCustomer',
  options: (ownProps) => ({
    variables: {
      path: ownProps.path // set your path like this
    }
  })
})(Image);

export default ImageWithData

chmac · Accepted Answer · 2018-02-19T17:04:14.287

Gatsby pulls all of your data into its internal nodes system, then pushes data into your components only via queries in either layouts or pages.

This single source of entry ensure that Gatsby can compile all your data to static JSON. The approach provided by @toufek-khoury will deliver data to your component, but it will bypass the Gatsby cache. In almost every case, you want your data to be cached, that's what makes Gatsby so unbelievably fast.

The solution is to fetch all the data you need for a page in the pageQuery.

Component props to GraphQL

2 Answers2