Error on importing images from Wordpress to GatsbyJS V2

Question

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.

Sarah Sarah · Accepted Answer · 2019-01-09T19:29:11

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

Maybe its that??

Error on importing images from Wordpress to GatsbyJS V2

2 Answers