Как реализовать Gatsby Image с использованием GraphQL и OrchardCore CMS?

Question

Я пытаюсь использовать GatsbyJS Image для оптимизации изображений, которые извлекаются с помощью GraphQL и OrchardCore CMS.

Запрос, который я делаю к CMS

query {
  cms {
    page {
      bag {
        contentItems {
          ... on prefix_JumboTron {
            background {
              urls
              paths
            }
            contentType
          }
        }
      }
    }
  }
}

Ответ, который я получаю

{
  "data": {
    "cms": {
      "page": [
        {
          "bag": {
            "contentItems": [
              {
                "background": {
                  "urls": [
                    "/media/Images/background.jpg"
                  ],
                  "paths": [
                    "Images/background.jpg"
                  ]
                },
                "contentType": "JumboTron"
              }
            ]
          }
        }
      ]
    }
  }
}

Я установил необходимые плагины.

1. gatsby-image
2. gatsby-transformer-sharp
3. gatsby-plugin-sharp

Кроме того, я установил gatsby-source-graphql. И, конечно же, зарегистрировал их в gatsby-config.js

{
    resolve: `gatsby-source-filesystem`,
    options: {
        name: `images`,
        path: `${__dirname}/src/images/`,
    },
},
`gatsby-transformer-sharp`,
`gatsby-image`,
`gatsby-plugin-sharp`,

Я хочу добиться чего-то подобного

query {
      cms {
        page {
          bag {
            contentItems {
              ... on prefix_JumboTron {
                childImageSharp {
                fluid(maxWidth: 300) {
                        ...GatsbyImageSharpFluid
                }
            }
                contentType
              }
            }
          }
        }
      }
    }

Я просканировал Интернет, но не могу найти решение длякак решить проблему. Кто знает как это сделать?

Заранее спасибо, Джорди