Jank on every query

[aquadesk]

Hi all,

I have a list page and tapping one of them opens a detail view page

On every detail view load, it comes with a jank

I am not certain about the root cause of the janks

But what I see on the dev tools, it seems it's coming from managing cache.

In my stateful hook widget, i do

    final reviewHook = useQuery$ProductReview(Options$Query$ProductReview(
      variables: Variables$Query$ProductReview(
        id: widget.productReview.id!,
      ),      
      fetchPolicy: FetchPolicy.cacheAndNetwork,
    ));

It seems it takes 2.5s to run a query and process it on a device (one plus 6) in a profile mode.

I am not a professional flutter engineer so please excuse me for wrong terms or assumptions.

I can provide more context or code snippet how I do things on my app but not sure how much I should share to give a proper amount of context for this.

I've tried almost everything that could contribute to this jank but I see that as soon as the app makes a graphql query, it janks.
Even with the Fetch policy noCache.

I was using 5.1.1. beta 2

Thanks for the awesome project!

Any idea, direction or suggestion how I should go about figuring out what is causing the jank would be appreciated.

[vincenzopalazzo]

You can use the following API https://api.chat.graphql-flutter.dev/graphql to create a small demo app to reproduce your problem in a local env.

In addition, you can try to upgrade and reproduce the problem with the last beta https://pub.dev/packages/graphql_flutter/versions/5.1.1-beta.4/changelog

I'm not able to understand you image because I think there is a missing context, but with the demo we can track this down

[aquadesk]

Let me try to do that.
Thank you so much!

[aquadesk]

Hi all,

Here is an update on this thread.

I took a different route to figure out the root cause.

I checked out that flutter_graphql lib code and found that _cachedDataHasChangedFor function does the deep equal check to see if the cache is stale or reusable. (or need an update and broadcast the changes)

https://github.com/aquadesk/collection
The flame chart that I provided as a screenshot above was pretty clear to me so I forked collection lib and added a benchmark to see if it is really taking long and it blocks UI thread which causes jank

and it indeed took really long for the deep equal
https://github.com/aquadesk/collection/blob/master/lib/benchmark/bench_test.dart

There is a payload hardcoded in the file.
And this is the result

00:00 +0: Benchmark()
Template(RunTime): 530045.5 us.
00:03 +1: All tests passed!
Exited

I really took 0.5 second to only run equality check.

I don't think this is an easy fix. I am thinking about checking out apollo implementation to see how they deal with this since I've never experienced this on web apps.

cheers.

I am using strapi for graphql service (headless CMS)
so adjusting schema to make it work better is not an option unfortunately.

schema is looking something like this

type ReviewList {
  title: String
  desc: String
  tasteList: String
  author: UsersPermissionsUserEntityResponse
  likeCount: Int
  reviews(
    filters: ProductReviewFiltersInput
    pagination: PaginationArg = {}
    sort: [String] = []
  ): ProductReviewRelationResponseCollection
  approved: Boolean
  createdAt: DateTime
  updatedAt: DateTime
}

type ReviewListEntity {
  id: ID
  attributes: ReviewList
}

type ReviewListEntityResponse {
  data: ReviewListEntity
}

type ReviewListEntityResponseCollection {
  data: [ReviewListEntity!]!
  meta: ResponseCollectionMeta!
}

[insidewhy]

Given each sub-document is individually cached, is deep equality needed? Maybe a reference check could be done first and then a deep equality check could be used as a fallback?

[aquadesk]

I realized that setting alwaysRebroadcast=true will make it bypass the deepequal but I am not sure about the consequences.
It could cause more issues later down the road but I will try to use it.

Thanks

  bool _cachedDataHasChangedFor(
    ObservableQuery<Object?> query,
    Map<String, dynamic>? cachedData,
  ) =>
      cachedData != null &&
      (alwaysRebroadcast || !_deepEquals(query.latestResult!.data, cachedData));

[insidewhy]

This is an important and significant point that anybody who might want to use graphql-flutter should be aware of. Is it not also something that you aim to fix given the impact? Feel like this was better as an issue rather than a discussion.

[budde377]

I agree.

[vincenzopalazzo]

I move it as a discussion because this needs more love in studying this specific use case!

and also we do not have a reproducible example, so I will not go to work on it till I have some example that can make me happy to test my solution.

Changing how we do the equality check can be dangerous with not enough justification because can change the bheaivoid of one app.

We can try to pass an equality function provided by the user in this case and make all happy, but for now, I have other stuff on my todo list and this required to be reproduced in some way or another

maybe @budde377 has space in the todo list?

[budde377]

I'll try and pick up these performance bugs next. I think the thorough analysis done here should be enough to get me going.

…

On Wed, Aug 10, 2022 at 9:47 AM Vincenzo Palazzo ***@***.***> wrote: I move it as a discussion because this needs more love in studying this specific use case! and also we do not have a reproducible example, so I will not go to work on it till I have some example that can make me happy to test my solution. Changing how we do the equality check can be dangerous with not enough just because can change the bheaivoid of one app. We can try to pass an equality function provided by the user in this case and make all happy, but for now, I have other stuff on my todo list and this required to be reproduced in some way or another — Reply to this email directly, view it on GitHub <#1195 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA2UFS4RN3O4T7XTQS3ACW3VYNUCJANCNFSM56CYJHRA> . You are receiving this because you commented.Message ID: <zino-hofmann/graphql-flutter/repo-discussions/1195/comments/3364572@ github.com>

[insidewhy]

Changing how we do the equality check can be dangerous with not enough justification because can change the bheaivoid of one app.

It affects every non trivial query in my app. The app isn't that complex. We decided we'd have to move off this library or fix it ourselves since the performance/jank is beyond limits our users (or even the programmers) are willing to accept.

[orestesgaolin]

Which other library has this problem resolved?