Gatsby-plugin-sharp problem with images fetched from Contentful

APIs Content Delivery API
1

Hello,

I am making my first site with Contentful, and I’m overall quite a noob developer.

I have been using gatsby-image no problem. However, I want to use gatsby-plugin-sharp to have more control (I’m mostly just frustrated with the image quality). However, I have spent days googling and trying everything and I can’t seem to figure out how to use it with images I fetch from Contentful (not images saved locally).

Part of my gatsby-config file:

// gatsby-config.js

require("dotenv").config()

module.exports = {
    plugins: [
        `gatsby-plugin-react-helmet`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/images`,
            },
        },
        {
        resolve: `gatsby-source-contentful`,
            options: {
                spaceId: process.env.spaceId,
                accessToken: process.env.accessToken,
            },
        },
        `gatsby-transformer-remark`,
        `html-react-parser`,
        `gatsby-transformer-sharp`,
        {
            resolve: `gatsby-plugin-sharp`,
            options: {
                useMozJpeg: false,
                stripMetadata: true,
                defaultQuality: 100,
            },
        },
    ],
}

Example GraphiQL query:

{
	allContentfulAsset {
	    edges {
	        node {
	            id
                fluid {
                    base64
                    aspectRatio
                    src
                    srcSet
                    srcWebp
                    srcSetWebp
                    sizes
                }
	        }
	    }
    }
}

Help?