zino-hofmann / graphql-flutter

A GraphQL client for Flutter, bringing all the features from a modern GraphQL client to one easy to use package.
https://zino-hofmann.github.io/graphql-flutter
MIT License
3.23k stars 608 forks source link

Extreme slowness/jank with JSON scalar #1396

Open JWambaugh opened 7 months ago

JWambaugh commented 7 months ago

Not sure if this is the same as #1196, but I am seeing extreme jank when running a query that returns a field of type JSON. If I don't include the JSON field, i have much less jank, but if I include a JSON field there is multi-second jank when running on the web especially.

To Reproduce (MUST BE PROVIDED)

  1. Create a schema defining a scalar JSON
  2. Using graphql_codegen, define a JSON scalar as: JSON: type: Map<String, dynamic>
  3. write a query that pulls data from server including a JSON field
  4. run query, then run another query that contains similar data
  5. Note severe UI jank when query is run (in my case the jank is extremely visible as it happens during a go_router transition and completely halts the animation)

in my case the JSON field isn't very large, nor is the entire query result. the JSON field's value is strapi's image format object. example:

{
                    "tiny": {
                      "ext": ".jpeg",
                      "url": "/uploads/tiny_profile_21_8e359378ef.jpeg",
                      "hash": "tiny_profile_21_8e359378ef",
                      "mime": "image/jpeg",
                      "name": "tiny_profile_21.jpeg",
                      "path": null,
                      "size": 1.72,
                      "width": 100,
                      "height": 86
                    },
                    "small": {
                      "ext": ".jpeg",
                      "url": "/uploads/small_profile_21_8e359378ef.jpeg",
                      "hash": "small_profile_21_8e359378ef",
                      "mime": "image/jpeg",
                      "name": "small_profile_21.jpeg",
                      "path": null,
                      "size": 6.64,
                      "width": 250,
                      "height": 215
                    },
                    "medium": {
                      "ext": ".jpeg",
                      "url": "/uploads/medium_profile_21_8e359378ef.jpeg",
                      "hash": "medium_profile_21_8e359378ef",
                      "mime": "image/jpeg",
                      "name": "medium_profile_21.jpeg",
                      "path": null,
                      "size": 22.36,
                      "width": 500,
                      "height": 430
                    },
                    "thumbnail": {
                      "ext": ".jpeg",
                      "url": "/uploads/thumbnail_profile_21_8e359378ef.jpeg",
                      "hash": "thumbnail_profile_21_8e359378ef",
                      "mime": "image/jpeg",
                      "name": "thumbnail_profile_21.jpeg",
                      "path": null,
                      "size": 4.16,
                      "width": 181,
                      "height": 156
                    }
                  }

Expected behavior There should be no jank

device / execution context macos, ios, web. Especially pronounced issue on web, which takes a couple seconds. mac and ios have much shorter jank, but it's still pretty bad. server is strapi using graphql plugin