GraphQLImage gives "Received incompatible instance..." error

[fabio1079]

Hi, I'm trying to use a GraphQLImage to get the url from a models.ImageField in a page.
Sample code:

class LandingPage(HeadlessMixin, Page):
    max_count = 1

    background_image = models.ImageField(upload_to="uploads")

    content_panels = Page.content_panels + [
        FieldPanel("background_image"),
    ]
    graphql_fields = [
        GraphQLImage("background_image"),
    ]

But when I try to query for it, a "Received incompatible instance..." error is return.
Sample query:

{
  pages(contentType: "home.LandingPage") {
    ... on LandingPage {
      backgroundImage {
        url
      }
    }
  }
}

Gives this error:

{
  "errors": [
    {
      "message": "Received incompatible instance \"uploads/florest.jpg\".",
      "locations": [
        {
          "line": 4,
          "column": 7
        }
      ],
      "path": [
        "pages",
        0,
        "backgroundImage"
      ]
    }
  ],
  "data": {
    "pages": [
      {
        "backgroundImage": null
      }
    ]
  }
}

As for the image file, I just got a random jpg image from google images e uploaded it via wagtail admin page creation.
It's my first time using GraphQL with Wagtail, so I might be doing something wrong.

These are dependencies on my pyproject.toml

[tool.poetry.dependencies]
python = "^3.10"
wagtail = "^4.2.2"
psycopg2 = "^2.9.6"
wagtail-grapple = "^0.19.2"
django-cors-headers = "^3.14.0"
rocketchat-api = "^1.30.0"
elasticsearch = ">7.0.0,<8.0.0"
wagtail-headless-preview = "^0.5.0"
django-graphql-jwt = "^0.3.4"
pillow = "^9.5.0"

[zerolab]

GraphQLImage is intended for use with Wagtail images, not pure Django images.
You should be able to use GraphQLField with a property or a callable as the source kwarg.

See

wagtail-grapple/tests/testapp/blocks.py

Lines 140 to 144 in b4e256c

	GraphQLField("field_property", graphene.String, source="get_field_property"),
	GraphQLField("field_method", graphene.String, source="get_field_method"),
	(
	GraphQLString(
	"field_method_with_extra_arg", source="get_field_method_with_extra_arg"

[fabio1079]

Thank you for the response, using GraphQLField with graphene.String worked just fine. 👍