Gatsby / Drupal8 decouple: How do I render an image on a Gatsby page that pulls from a Drupal file directory?

GOAL: use Gatsby to render Drupal 8 images associated with nodes

I can render the default Drupal 8 Article node info just fine using a GraphQL query. I cannot get the default image field to render (field_image) – it just renders the url of the image. So I’m almost there but definitely missing something fundamental. Help please?

import React from "react" import { Link, graphql } from "gatsby" import Img from "gatsby-image"  const BlogPage = ({data}) => (    <div>      <h1>Know What Grinds My Gears?</h1>      {       (         { node }) => (             <div>  #the next Img line doesn't work (renders nothing)             <Img fluid={ node.relationships.field_image.uri.url } />              <h3> { node.title } </h3>             <div dangerouslySetInnerHTML={{ __html: node.body.summary }} />             <Link to= { } >read</Link> #the next <figure> line doesn't work (renders correct url to image file)             <figure> { node.relationships.field_image.uri.url }</figure>          </div>          )       )     }    </div>  )   export default BlogPage export const query = graphql`   query allNodeArticle {     allNodeArticle {      edges {        node {          id         title         body {            value           format           processed           summary         }         relationships {           field_image {             uri {               value               url             }           }         }       }      }   } }   ` 

what am I doing wrong?

How to properly decouple the service layer from the user interface layer, if the service layer needs to interact with the user?

In my program, I have a long-running function from which I would like to interact with the user for various reasons:

  1. Giving status updates (“Downloading file /foo/bar.png)
  2. Displaying warnings (“File upload failed; will retry later”)
  3. Asking for input (“Please enter your google drive password”)

The problem is, of course, that this function doesn’t know how it should interact with the user. For example, it would be nonsensical to display messages on stdout in a GUI program.

In case of errors, the solution is obvious – just throw an exception that’ll be caught in the user interface layer. Errors are easy because the service layer’s job is done as soon as the exception is thrown. But what about things like warnings and input? How do I bridge the gap between the service layer and the user?