I want to fetch the image relativeUrl, width, and height and use them inside a component as metadata.

I have the following schema type defined in gatsby-node.js:

type Publisher {
  legalName: String!
  logoImage: String!
}

I want the logoImage to have just the filename, and I want this configurable, so I put inside gatsby-config.js, like so:

module.exports = {
   ...
   ...
   siteMetadata: {
   ...
      publisher: {
         legalName: "My Name",
         logoImage: "ef.logo.png"
      }
   ...
   }
   ...
}

Inside my component Metadata I have a static query from which I can easily access siteMetadata.publisher.logoImage. I thought of creating a query to get the logoImage value, store it in JavaScript, then passing it as a variable to another query, but discovered that variables are not supported in static queries.

What I was thinking was to write the following query:

query Metadata($logoImage: String!) {
    file(relativePath: { eq: $logoImage }) {
      childImageSharp {
        original {
          width
          height
          src
        }
        gatsbyImageData(width: 144, layout: FIXED)
      }
    }
    ...
}

Because I wanted to have access to the width and height of the original file, as well as possibly a scaled down version. The values would then be put in metadata tags.

I know there are other approaches I can try, but since I am new to Gatsby (sorry, I arrived very late to the party), I figured this problem must be already addressed by the framework.
On the documentation I read about the helped functions to gatsby-source-filesystem or how to process external images.

However, I really just wanted something that I thought would be trivial and available when I statically create the pages.

Any pointers are appreciated.
Thank you.

P.S – I do have the gatsby-source-filesystem plugin active and configured:

...
{
  resolve: `gatsby-source-filesystem`,
    options: {
      name: `blog`,
      path: `${__dirname}/content/blog`,
      fastHash: true, // uses mtime and inode to fingerprint files
      ignore: [`**/.DS_Store`] // ignore files starting with a dot
    }
},
{
  resolve: `gatsby-source-filesystem`,
    options: {
      name: `images`,
      path: `${__dirname}/src/images`
    }
},
...

I had tried with the variables in the GraphQL query, but I cannot due it on a static query, due to framework limitation.

ERROR #85920 GRAPHQL.VALIDATION

File path:
/media/efabrizio/Data/development/www.emanuele-fabrizio.com/ef-gatsby-blog/src/components/metadata.js
Plugin: none

Suggestion 1:

If you’re not using a page query but useStaticQuery you see this error because it doesn’t support
variables. To learn more about the limitations: https://gatsby.dev/use-static-query

Suggestion 2:

You might have a typo in the variable name “$logoImage” or you didn’t provide the variable via context
to this page query. Learn how to add data to context: https://gatsby.dev/graphql-variables-how-to