Error on importing images from Wordpress to GatsbyJS V2 - wordpress

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.

Answer 1

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

Answer 2

Wordpress has issues with featured images in REST API for permissions. I made a Github issue about this.
https://github.com/gatsbyjs/gatsby/issues/23458
Install the Better Featured Image Plugin and then use this....
allWordpressPost {
edges {
node {
better_featured_image {
source_url
}
}
}
}