ImageSharp doesn't work for images in siteMetadata

I am trying to apply ImageSharp queries to images included as siteMetadata. For some reason, the nodes with the image path are then defined as String instead of File. Subsequently they aren’t transformed to ImageSharp by gatsby-transformer-sharp:

GraphQL Error Field "photo" must not have a selection since type "String" has no subfields.

  file: src/pages/team.js

   1 | 
   2 |   query TeamQuery {
   3 | 
   4 |     site {
   5 |       siteMetadata {
   6 |         team {
   7 |           teamMembers {
   8 |             experience
   9 |             name
> 10 |             photo {
     |                   ^
  11 |               childImageSharp {
  12 |                resolutions(width: 160, height: 200, quality: 90) {
  13 |                  ...GatsbyImageSharpResolutions
  14 |                }
  15 |               }
  16 |             }
  17 |             position
  18 |             children {
  19 |               name
  20 |               year

I could make the same work for image fields defined in frontmatter (as discussed in #2054). But I couldn’t make it work with siteMetadata.

Here the relevant part of my gatsby-config.js:

const yaml = require('js-yaml')
const fs = require('fs')
const loadYaml = (fname) =>
  yaml.safeLoad(fs.readFileSync(fname, 'utf8'))

module.exports = {
  siteMetadata: {
    ...siteMetadata,
    team: loadYaml('./data/team.yml'),
  },
  plugins: [
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages'
      }
    },
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',

And team.yml:

title: Team
teamMembers:
- name: Karin
  photo: img/karin.png
- name: Michael
  photo: img/michael-2.jpg

In order for the photo nodes to become File the relative path must be correct so that the file’s existence can be confirmed (at least this appears to be the case for image fields in frontmatter). But I tried all the possibilities I could think of for the path and couldn’t make it work.

Is there any fundamental difference between having image fields in frontmatter and injecting them as siteMetadata?

[ooloth]

I keep running into this issue since it would be nice to define the default site image (for SEO purposes) in the same siteMetadata object as the rest of the site-wide metadata.

It would be good to add support for this e.g. hard code inside Gatsby that siteMetadata lives at the root of the site.

👆

Does anyone know how to do this? I’d be happy to create the PR if someone can summarize how to do it.

[ilyabo]

@MaralS Not really. I am just not using images in siteMetadata. Instead I add collections of images as fields within pages directly. If you are using Netlify CMS, that also requires this workaround to work.