Resolve Gatsby image data in `_rawContent`

[aaronadamsCA]

trafficstars

I'd like to see a new option in the GraphQL schema to resolve Gatsby image data in _rawContent.

Intended usage:

{
  allSanityPage {
    nodes {
      id
      _rawContent(
        resolveReferences: {maxDepth: 10}
        resolveGatsbyImageData: {width: 1600}
      )
    }
  }
}

Intended result: Block content objects of "_type": "image" would contain asset.gatsbyImageData. This could be passed directly to gatsby-plugin-image while serializing block content, for example:

import { GatsbyImage } from "gatsby-plugin-image";

export const imageSerializer = ({ node }) => {
  return <GatsbyImage image={node.asset.gatsbyImageData} />;
};

This would make life with block content and Gatsby a lot easier!

[aaronadamsCA]

My amusing workaround, for now, is to populate siteMetadata with my Sanity projectId and dataset, and then use this very clumsy image serializer:

import { graphql, StaticQuery } from "gatsby";
import { GatsbyImage } from "gatsby-plugin-image";
import { getGatsbyImageData } from "gatsby-source-sanity";

export const imageSerializer = ({ node: { asset } }) => (
  <StaticQuery
    query={graphql`
      {
        site {
          siteMetadata {
            sanityLocation {
              projectId
              dataset
            }
          }
        }
      }
    `}
    render={({ site: { siteMetadata } }) => (
      <GatsbyImage
        image={getGatsbyImageData(asset._id, {}, siteMetadata.sanityLocation)}
      />
    )}
  />
);

[1-800-jono]

Is this the only way to do this?

[aaronadamsCA]

As far as I know.

I mean - there are for sure better ways to grab projectId and dataset. For us, we'll probably switch to a context-based solution for that part when we eventually refactor that code.

But resolving the image data still needs to be done in the serializer, and is not happening inside the Gatsby graph.

[1-800-jono]

Thanks @aaronadamsCA - I was able to solve the issue with your comment.