chrispian/index.js

## index.js
import React from "react"
import { Link, graphql } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"
import SEO from "../components/seo"

export default ({ data }) => {
    return (
        <Layout>
            <SEO title="home" />
            {data.allWordpressPost.edges.map(({ node }) => (
                <div>
                    <Link to={node.slug}>
                        <p>{node.title}</p>
                    </Link>

                    /* This throws an error: TypeError: Cannot read property 'source_url' of null */
                    /* I've tried several ways of doing this, always throws that error. */
                    <img src="{node.featured_media.source_url}" border="0" alt="{node.title}" />

                    /* console.log shows the correct value, the URL of the image I want to use. */
                    {console.log(node.featured_media.source_url)}

                    <div
                        /* Remove the read more link from the WP Excerpt. It links back to the original url instead of local Gatsby.  */
                        dangerouslySetInnerHTML={{
                            __html: node.excerpt.replace(/<a class="more-link.*/, ''),
                        }}
                    />

                </div>
            ))}
        </Layout>
    )
}

export const pageQuery = graphql`
  query {
  allWordpressPost(sort: {order: DESC, fields: [date]}) {
    edges {
      node {
        title
        excerpt
        slug
        featured_media {
            source_url
        }
      }
    }
  }
}
`
	import React from "react"
	import { Link, graphql } from "gatsby"
	import Img from "gatsby-image"
	import Layout from "../components/layout"
	import SEO from "../components/seo"

	export default ({ data }) => {
	return (
	<Layout>
	<SEO title="home" />
	{data.allWordpressPost.edges.map(({ node }) => (
	<div>
	<Link to={node.slug}>
	<p>{node.title}</p>
	</Link>

	/* This throws an error: TypeError: Cannot read property 'source_url' of null */
	/* I've tried several ways of doing this, always throws that error. */
	<img src="{node.featured_media.source_url}" border="0" alt="{node.title}" />

	/* console.log shows the correct value, the URL of the image I want to use. */
	{console.log(node.featured_media.source_url)}

	<div
	/* Remove the read more link from the WP Excerpt. It links back to the original url instead of local Gatsby. */
	dangerouslySetInnerHTML={{
	__html: node.excerpt.replace(/<a class="more-link.*/, ''),
	}}
	/>

	</div>
	))}
	</Layout>
	)
	}

	export const pageQuery = graphql`
	query {
	allWordpressPost(sort: {order: DESC, fields: [date]}) {
	edges {
	node {
	title
	excerpt
	slug
	featured_media {
	source_url
	}
	}
	}
	}
	}
	`