GatsbyJS: запрос изображения Gatsby из WPGraphQL для расширенных настраиваемых полей

Я пытаюсь отобразить кучу изображений на моем сайте GatsbyJS из полей изображений ACF. При использовании Gatsby Image на моем сайте возвращается значение null. Возможно, я упускаю что-то очевидное.

Я пробовал изменить свой запрос graphql всеми способами, например, использовать remoteFile вместо localFile, передать srcSetWebp и т. Д., Но, похоже, у меня ничего не работает.

Любая помощь приветствуется.

Мой запрос graphql:

 {
  allWpPage {
    nodes {
      ACFgraphql {
        logoGrid {
          img9 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
          img8 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
          img7 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
          img6 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
          img5 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
          img4 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
          img3 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
          img2 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
          img12 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  srcSetWebp
                }
              }
            }
          }
          img11 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
          img10 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
          img1 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
        }
      }
    }
  }
}

Затем я пытаюсь отобразить изображение с помощью Gatsby-image Img-tag на моем сайте. Гэтсби-образ - это версия 2.11.0:

<Img fixed={data.allWpPage.nodes[0].ACFgraphql.logoGrid.img1} />

Когда я делаю console.log (data), он просто возвращает null. Снимок экрана: https://p221.p4.n0.cdn.getcloudapp.com/items/kpuK4ej6/19a9fe22-f210-48c8-a27b-3095fed974fe.png?source=client&v=3259d89b2c9f4clowd8ed

Снимок экрана IDE graphiql, которая возвращает данные: https://p221.p4.n0.cdn.getcloudapp.com/items/QwuE4O7Q/4c664ef7-6fbe-4e4b-b533-79102a19ee53.png?v=bd25rel208817d7508af=