How can I display image from props with GraphQL? Can display image url but not the image itself

Question

I'm using a wordpress cms with a GraphQL plugin on the backend. The front end is react. This a page component that is used for all pages in my wordpress.

My app seems to break completely when I try to render the image.

I can print the image src url just fine.

I'm using this boilerplate code and added in my own GraphQL endpoint for the data.

        import React, { Component } from 'react';
        import { Redirect } from 'react-router-dom';
        import { graphql } from 'react-apollo';
        import gql from 'graphql-tag';
        import { sanitize } from '../commons/HtmlSanitizer';

        class Page extends Component {


          render() {
            const props = this.props;

            return (
              <div className="page">


                <h1>{(props.data.page.childPages) ? props.data.page.childPages.edges[0].node.title : '-'}</h1>

                <div id="page-content" className="content" dangerouslySetInnerHTML={{
                  __html: (props.data.page) ? sanitize(props.data.page.content) : ''
                }}></div>
              </div>
            );
          }

          componentDidUpdate() {
            let pageContent = document.getElementById('page-content');
            let links = Array.from(pageContent.querySelectorAll('a'));
            links.map( (node) => node.onclick = this.onLinkClicked.bind(this) );
          }

          onLinkClicked(event) {
            event.preventDefault();
            this.props.history.push(event.currentTarget.pathname);
          }
        }

        const GetPageBySlug = gql`
          query petPageBySlug($slug: String) {
            page: pageBy(uri:$slug) {
              id
              title
              slug
              date
              content
              childPages{
                  edges{
                    node{
                      id
                      title
                  }
                }
              }
            }
          }`;

        export default graphql(GetPageBySlug, {
          options: (props) => {

            let { slug, parent } = props.match.params;
            if (parent == "locations") {
              slug = `${parent}/${slug}`
            }
            if(parent == "pediatrics"){
              slug = `locations/${parent}/${slug}`
            }

            return {
              variables: {
                slug
              }
            }
          }
        })(Page);

Answer 1

This is simply because you're not checking to see if props.data.page exists, when you attempt to access props.data.page.featuredImage . When props.data.page is undefined, the code will crash, because you're trying to access a property on an undefined object. Make sure page exists (And perhaps even futher to make sure props.data.page.featuredImage exists as well):

render() {
    const props = this.props;

    return (
      <div className="page">  
        <h1>{(props.data.page) ? props.data.page.featuredImage.sourceUrl : '-'}</h1>

        {props.data.page && <img src={props.data.page.featuredImage.sourceUrl} alt={props.data.page.slug} />}

        <div id="page-content" className="content" dangerouslySetInnerHTML={{
          __html: (props.data.page) ? sanitize(props.data.page.content) : ''
        }}></div>
      </div>
    );
  }

See the docs for conditional rendering for more information on this.