Gatsby 3 / Gatsby Source Sanity 7 - no longer able to use fixed/fluid cropped images for background style.

[pdincubus]

trafficstars

Usually, I'd be able to do something similar to this:

import React from 'react';
import { graphql } from 'gatsby';

const ComponentName = ({ data }) => {
    return (
        <div style={{ backgroundImage: `url(${data.image.asset.fixed.src})` }}></div>
    );
};

export default ComponentName;

export const query = graphql`
    query($slug: String!) {
        sanityDocumentType {
            image {
                asset {
                    fixed(width: 600, height: 200) {
                        ...GatsbySanityImageFixed
                    }
                }
            }
        }
    }
`;

But after updating to Gatsby 3 and the latest Sanity source plugin, I am only getting this type of error:

Cannot query field "fixed on type "SanityImage"

The same happens for fluid images too, and I can also no longer see these properties via the GraphiQL interface - they just seem to have gone. I do see the _rawAsset option, but this doesn't seem to give me what I need, being a URL to a cropped/optimised version of an image I've requested at a fixed size.

How do I go about making the new versions work in a similar way to the above as they appear to have just been completely removed?

I do not want to use <GatsbyImage /> or similar (as per example in documentation) as I'm wanting to use a background-image in CSS in several places where an <img /> would be the wrong choice for both performance, and from a HTML output point of view., but also because Gatsby already should have access to the Sanity config in order to populate my pages - it seems like an anti-pattern to have to pass that config in every time I need to use an image?