Vfrdtyky

I am new to Gatsby and React in general and I can't seem to figure out how to display images using Gatsby Sharp with the Wordpress source plugin.

Using the setup on tutorials and example code I have this on my setup.

on my gatsby-config.js:

    module.exports = {

  siteMetadata: {

    title: 'Gatsby Default Starter',

  },

  plugins: [

    'gatsby-plugin-react-helmet',

    {

      resolve: `gatsby-source-filesystem`,

      options: {

        name: `images`,

        path: `${__dirname}/src/images`,

      },

    },

    {

      resolve: `gatsby-source-wordpress`,

      options: {

        /*

        * The base URL of the WordPress site without the trailingslash and the protocol. This is required.

        * Example : 'gatsbyjswpexample.wordpress.com' or 'www.example-site.com'

        */



        baseUrl: `MYWORDPRESSSITE`,

        // The protocol. This can be http or https.

        protocol: `http`,

        // Indicates whether the site is hosted on wordpress.com.

        // If false, then the asumption is made that the site is self hosted.

        // If true, then the plugin will source its content on wordpress.com using the JSON REST API V2.

        // If your site is hosted on wordpress.org, then set this to false.

        hostingWPCOM: false,

        // If useACF is true, then the source plugin will try to import the WordPress ACF Plugin contents.

        // This feature is untested for sites hosted on WordPress.com

        useACF: true,

      },

    },

    'gatsby-transformer-sharp',

    'gatsby-plugin-sharp',

    {

      resolve: `gatsby-plugin-manifest`,

      options: {

        name: 'gatsby-starter-default',

        short_name: 'starter',

        start_url: '/',

        background_color: '#663399',

        theme_color: '#663399',

        display: 'minimal-ui',

        icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.

      },

    },

    // this (optional) plugin enables Progressive Web App + Offline functionality

    // To learn more, visit: https://gatsby.app/offline

    // 'gatsby-plugin-offline',

  ],

}

This is my query:

export const pageQuery = graphql`

query {

  allWordpressPost{

    edges {

      node {

        id

        slug

        title

        content

        excerpt

        date

        modified

        featured_media {

          localFile {

            childImageSharp {

              fluid(maxHeight: 300) {

                base64

                tracedSVG

                aspectRatio

                src

                srcSet

                srcWebp

                srcSetWebp

                sizes

                originalImg

                originalName

              }

            }

          }

        }

      }

    }

  }

}`

and add the image on my index using this:

const IndexPage = ({data}) => (

  <Layout>

    {data.allWordpressPost.edges.map(({ node }) => (

            <Img fluid={node.featured_image.localFile.childImageSharp.fluid} />



              <h2 className="mt0">{node.title}</h2>

              <p className="measure blogpost" dangerouslySetInnerHTML={{ __html: node.content }}></p>

    ))}

  </Layout>

)

When on dev mode I receive a blank page and when I try to build it, I get an error.

WebpackError: TypeError: Cannot read property 'localFile' of undefined

I am not sure what I am missing at this point as I can see localFile on my graphql but I am hoping someone can point me to the right direction.

In the GraphQL query it has node.featured_media and in your React code you're doing node.featured_image

Maybe its that??