Query for images in netlifycms not working correction in gatsby/graphql. Need help verifying configuration

I'm not sure what's wrong with my configuration. I've read all the tutorials regarding how to set this up. However, my images are not being picked up correctly in graphql for some reason.

Here is my config.yml

    backend:
        name: git-gateway
        branch: master
    
    local_backend:
        url: http://localhost:8082/api/v1
        allowed_hosts: ['192.168.0.1']
    
    media_folder: static/img
    public_folder: /img
    
    collections:
        - name: 'music'
          label: 'music'
          folder: 'content/music'
          create: true
          slug: 'index'
          media_folder: '/'
          public_folder: '/'
          editor:
              preview: false
          fields:
              - { label: 'Title', name: 'title', widget: 'string' }
              - { label: 'Release Date', name: 'date', widget: 'datetime' }
              - { label: 'Artwork', name: 'image', widget: 'image' }
              - { label: 'Spotify Url', name: 'spotify', widget: 'string' }

gatsby-config.js

{
    resolve: `gatsby-source-filesystem`,
    options: {
        name: `music`,
        path: `${__dirname}/content/music `,
    },
},
`gatsby-plugin-styled-components`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
    resolve: 'gatsby-transformer-remark',
    options: {
        plugins: [
            'gatsby-remark-images',
            {
                resolve: 'gatsby-remark-images',
                options: {
                    maxWidth: 2048,
                },
            },
        ],
    },
},
`gatsby-plugin-netlify-cms`,
`gatsby-plugin-netlify-cms-paths`,

My query:

  {
  music: allFile(filter: {sourceInstanceName: {eq: "music"}}) {
    edges {
      node {
        id
        childImageSharp {gatsbyImageData}
        childMarkdownRemark {
          frontmatter {
            title
          
            image
          }
        }
      }
    }
  }
}

In my content/music/ I only have one folder but it comes back with two ones. I'm expecting the childImageSharp to be in the first node.

Here's the structure: contact/music/hell-made-me-stable/index.md contact/music/hell-made-me-stable/image.jpg

My response:

{
  "data": {
    "music": {
      "edges": [
        {
          "node": {
            "id": "576e6d54-f3aa-5b51-b35c-682fed8a820c",
            "childImageSharp": null,
            "childMarkdownRemark": {
              "frontmatter": {
                "title": "Hell Made Me STable",
                "image": "hell-made-me-stable.jpg"
              }
            }
          }
        },
        {
          "node": {
            "id": "2701fc19-6251-5a4d-8316-d24a590313af",
            "childImageSharp": {
              "gatsbyImageData": {
                "layout": "constrained",
                "backgroundColor": "#080808",
                "images": {
                  "fallback": {
                    "src": "/static/2a129588a0917df3df5e0d89954a9916/5a7c3/hell-made-me-stable.jpg",
                    "srcSet": "/static/2a129588a0917df3df5e0d89954a9916/f505e/hell-made-me-stable.jpg 250w,\n/static/2a129588a0917df3df5e0d89954a9916/be5ed/hell-made-me-stable.jpg 500w,\n/static/2a129588a0917df3df5e0d89954a9916/5a7c3/hell-made-me-stable.jpg 1000w",
                    "sizes": "(min-width: 1000px) 1000px, 100vw"
                  },
                  "sources": [
                    {
                      "srcSet": "/static/2a129588a0917df3df5e0d89954a9916/e7160/hell-made-me-stable.webp 250w,\n/static/2a129588a0917df3df5e0d89954a9916/5f169/hell-made-me-stable.webp 500w,\n/static/2a129588a0917df3df5e0d89954a9916/3cd29/hell-made-me-stable.webp 1000w",
                      "type": "image/webp",
                      "sizes": "(min-width: 1000px) 1000px, 100vw"
                    }
                  ]
                },
                "width": 1000,
                "height": 1000
              }
            },
            "childMarkdownRemark": null
          }
        }
      ]
    }
  },
  "extensions": {}
}

There are a few configurations odd to me:

media_folder: static/img
public_folder: /img

This looks good, as the images will be transpiled into the public folder, however, the fact that the music collection is creating two files (markdown + image) in the same file is the key of your problem since edges is an array of two positions (with childImageSharp null).

I'd remove the following configuration in the collection:

      media_folder: '/'
      public_folder: '/'

Moreover, to allow Gatsby to parse, transform and sharp your images you need to add the following into your gatsby-config.js:

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `uploads`,
    path: `${__dirname}/static/img`,
  },
},

Since it's the source of your images set in the media_folder.

All of this should create a single markdown file placed at contact/music/hell-made-me-stable/index.md with the image placed in the static folder, allowing you to point that image through the markdown.