Adding search with gatsby-image

[krismorf]

Question

What's the best way to implement search functionality on my site while taking advantage of gatsby-transformer-sharp?

I have a card component which is also my search result component👇

<Card
  title={node.frontmatter.title}
  image={node.image.childImageSharp.fluid}
  ...
/>

How can I include image.childImageSharp.fluid in my index?

What I tried

1. Created index with gatsby-plugin-elasticlunr-search: Impossible to query node.frontmatter.image.childImageSharp since it uses onCreateNode which is before the image optimization. This answer suggests creating my index manually but I'm not sure which gatsby API to use.
2. Created index with gatsby-plugin-lunr: This plugin uses onPostBuild so I figured it can take advantage of that. But it's similar to gatsby-plugin-elasticlunr-search, the plugin queries node.internal.type = MarkdownRemark and looks for entries in the markdown files. In my case node.frontmatter.image = "img/image.jpg".
3. Tried creating my own index but couldn't. I couldn't find any guides related to this.

At the moment I'm using gatsby-plugin-lunr which returns "img/image.jpg".
Is anyone struggling with the same issue? How can I go from here?

Previous discussions: #6230 #6112 #1075 #9295 #332

[krismorf]

OK, so I managed to build my lunr index using remark images.

If anyone is wondering how I did it:
In my gatsby-node.js I used the same graphql query that creates my pages, to also create my search index and create a json file, similar to what gatsby-plugin-lunr does. After that I added the json file to my gatsby-browser.js, again similar to the plugin above.