Gatsby: Saving Buffer as file to utilize image processing

[malcolm-kee]

Summary

How to save an image Buffer as file in order to utilize gatsby image processing?

If currently such use case is not available, which part of the code (core/plugin) that I can contribute to make it possible?

Relevant information

• This use case arises from gatsby-source-mysql, whereby images could be retrived from database as Buffer object.
• It seems like gatsby-source-filesystem exports a createRemoteFileNode helper for file in remote. However, I could not find something like createBufferFileNode.

[superhawk610]

You should be able to make use of gatsby-transformer-sharp to transform your Buffer nodes into ImageSharp nodes, which will in turn support image processing operations via GraphQL.

All you need to do to support gatsby-transformer-sharp is to make sure the nodes you create have a supported extension, one of the following:

const supportedExtensions = {
  jpeg: true,
  jpg: true,
  png: true,
  webp: true,
  tif: true,
  tiff: true,
}

You can read more on the transformer source here.

To create your image nodes, you'll want to create your own createBufferFileNode helper as AFAIK there is no existing version. You should be able to model your approach after createRemoteFileNode as you found (source here). You'll just need to

• write the contents of the buffer to a local cache file
• create a file node using createFileNode from gatsby-source-filesystem pointing to your cached file

[malcolm-kee]

Hi @superhawk610 thanks for your response.
AFAIK gatsby-source-filesystem doesn't exports createFileNode, therefore I need to make a pull request to export that?

[superhawk610]

If you look at the source for createFileNode it really just takes a file path and returns an object with a lot of information about that path. I don't think gatsby-source-filesystem wants to export that since it's only useful to other source plugins, so you may have to just write a similar file yourself.

[wardpeet]

This sounds awesome :smile:

We're happy to accept a PR that adds a createFileNodeFromBuffer that does the same thing as a remote url. We probably want to split up the processRemoteNode function one that fetches the file and one that has the logic of saving to disk.

[superhawk610]

@malcolm-kee unless you want to take this one, I'd like to work on the API that @wardpeet suggested. We should be able to get that merged into gatsby-source-filesystem within a week or so, then you can just pull from that in gatsby-source-mysql?

[malcolm-kee]

@superhawk610 you can proceed. Thanks!

[wardpeet]

Sounds awesome @superhawk610! Thanks for picking this up!