How do I convert a remote image URL in frontmatter from a String node to an ImageSharp node?

[arteforme]

Given

---
title: My Favorite Doggos
featuredImage: https://some-remote-server/pupperino.png
---

I'd like to fetch the image, via a source plugin, and then similar what the docs describe, be able to query for the image data in the frontmatter as an image, not a string.

To do this, I imagine, I'd have to hook into one of the various Node API's, write a plugin, etc. and so I looked through the source code of the plugins:

• gatsby-transformer-remark
• gatsby-transformer-sharp
• gatsby-source-filesystem
• gatsby-plugin-image or gatsby-image

mentioned in the docs linked earlier to try to see how thins were done, but I'm not able to make the connection.

At the very least, I see that in on-create-node.js of gatsby-transformer-remark, any thing defined in frontmatter is added to the markdown node

const data = grayMatter(content, pluginOptions)

// omitted for brevity

markdownNode.frontmatter = {
      title: ``, // always include a title
      ...data.data,
    }

I also see that gatsby-transformer-sharp, defines the following resolver:

  const resolvers = {
    File: {
      childImageSharp: {
        resolve: (parent, args, context, info) => {
           // omitted for brevity
        },
      },
    },
  }

  createResolvers(resolvers)
}

which is how the image in the markdown file would ultimately be queried. For example:

{
  allMarkdownRemark {
    nodes {
      frontmatter {
        featuredImage {
          childImageSharp {
            gatsbyImageData
          }
      }
    }
  }  
}

But I'm not able to find the code that does links things in between.

My initial/current approach is to create my own markdown transformer plugin that does what I mentioned earlier and query those nodes instead of the MarkdownRemark nodes emitted by gatsby-transformer-remark, but I'd like to see if there's I can avoid going down this route. If there is, can give me some tips on what I'd need to do?

[LekoArts]

This guide should help you: https://www.gatsbyjs.com/docs/how-to/images-and-media/preprocessing-external-images/

[arteforme]

Awesome, thanks you!

[mbifulco]

Hey @LekoArts - I'm in a similar scenario here for local images.

I have a project with mdx files that reference their coverImage by name:

coverImage: pupperino.png

All of these featured images are in a predictable directory within my repo. I went down a long and winding path of implementing
exports.createSchemaCustomization in gatsby-node.js - but after reading this thread, I'm wondering if that's the wrong approach. My implemented function look something like this:

exports.createSchemaCustomization = ({ actions, schema }) => {
  const { createTypes } = actions;
  const typeDefs = [
    'type Mdx implements Node { frontmatter: Frontmatter }',
    schema.buildObjectType({
      name: 'Frontmatter',
      fields: {
        coverImage: {
          type: 'ImageSharp',
          resolve: (source, args, context, info) => {
            const { coverImage } = source;
            if (!coverImage) return null;

            // search for the image by its file name, sans extension
            const dotLocation = coverImage.lastIndexOf('.');
            const coverImageName = coverImage.substring(0, dotLocation);

            return context.nodeModel.findOne({
              type: 'ImageSharp',
              query: {
                filter: {
                  original: {
                    src: {
                      regex: `/${coverImageName}/`,
                    },
                  },
                },
              },
            });
          },
        },
      },
    }),
  ];
  createTypes(typeDefs);
};

I haven't found a satisfying way to search for images by their file name + extension, since gatsby appends a hash to the file name somewhere along the line... so I'm using a gross hack and searching for any image with a regex. This feels... not great, and I'm fairlt certain I got something wrong here. Any tips for what I should be looking to do instead?