How do I use sharp image with Strapi 4 and Gatsby 4

I'm want to use images from my Strapi V4 local backend to my Gatsby 4 using sharp image processing.

I was able to with Strapi 3 + Gatsby 3, but have recently upgraded to Strapi 4 and Gatsby 4 to avoid future deprecation.

This is my gatsby-config.js:

    plugins: [
        "gatsby-plugin-sass",
        "gatsby-plugin-image",
        "gatsby-plugin-sharp",
        "gatsby-transformer-sharp",
        {
            resolve: "gatsby-source-graphql",
            options: {
                // Arbitrary name for the remote schema Query type
                typeName: "STRAPI",
                // Field under which the remote schema will be accessible. You'll use this in your Gatsby query
                fieldName: "strapi",
                // Url to query from
                url: "http://localhost:1337/graphql",
            },
        }
    ]

This is a file (page within my gatsby site) i've been testing on, it doesn't work.

import React from "react";

import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

const Test = ({ data }) => {
  const image = getImage(strapi.food.data.attribute.thumbnail.data.attribute)
  return (
    <div>
      <GatsbyImage image={image} alt={"Come on!"} />
    </div>
  )
}

export const pageQuery = graphql`
query FoodQuery {
  strapi {
    food(id: "67") {
      data {
        attributes {
          name
          thumbnail {
            data {
              attributes {
                childImageSharp {
                  gatsbyImageData(width: 200)
                }
              }
            }
          }
        }
      }
    }
  }
}
`
export default Test;

The error I keep getting is.

  25:17  error  Cannot query field "childImageSharp" on type "STRAPI_UploadFile"  graphql/template-strings

I've tried many things. I've checked to see if I can at least pull text and number fields, I can, all of them even attributes in the thumbnails object like createdAt.

I've checked to see if permissions are correct, and they seem fine - find, fineOne are both checked for the content-type and upload.

I've tried to query the uploadFile. And tried to pull food items one at a time and as a array/list of foods.

I've tried changing where I've placed childImageSharp as well as moving brackets around.

Edit: This is my GraphiQl sandbox with everything I can gather.