Gatsby / Drupal 8 - getting an image when using the media module (Acquia Lightning install)

Question

On a standard Drupal 8 install using images in a node its fairly easy to get the image via GraphQL. There great examples here: https://github.com/gatsbyjs/gatsby/tree/master/examples/using-drupal

With the Acquia Lightning install profile (or if you're simply using the Media module I expect) Media is adding images differently, in GraphiQL I see the media field in relationships, the only sub field within that is __typename

    {
      allNodeBlog {
        edges {
          node {
            relationships {
              field_media {
                __typename
              }
            }
          }
        }
      }
    }

I can also look at allMediaImage (or similar), in which I do have access to the images themselves. I can also all the node information in the 'relationships', But i need the node data to be the primary information of course. I don't really understand the best way to tie that query together with the nodes.

{
  allMediaImage {
    edges {
      node {
        relationships {
          image {
            localFile {
              childImageSharp {
                fluid {
                  ...
                }
              }
            }
          }
          node__blog {
            id
          }
        }
      }
    }
  }
}

I'm hoping that I can create the JSON in a different way perhaps to allow easier access to the images. Otherwise a way of getting the node id first then using that to select the appropriate media. Any ideas

Answer 1

Looks like you've worked it out already. But I'm posting a response for anyone else trying to figure this out.

Using Drupal nodes with Gatsby requires you to drill into the relationships between nodes and media entities, then into the relationship between the media entities and the files.

I'm using a simple Drupal 8.6.15 install with core Media and (experimental) Media Library enabled. And I have added a media field (image reference) called Image Asset (I removed the normal Image field) to my Article content type.

This is what my graphql query looks like...

query ArticleQuery{
  allNodeArticle {
    edges {
      node {
        # Use the node ID for the key in GatsbyJS
        drupal_internal__nid
        # Access the Article's text info
        created(formatString: "DD MMMM YYYY")
        title
        body {
          value
          summary
        }
        # Here is where I access the Image Asset field
        relationships {
          field_image_asset {
            relationships {
              field_media_image {
                localFile {
                  childImageSharp {
                    fluid(maxWidth:1200) {
                      ...GatsbyImageSharpFluid
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}