useQuery not returning stable references

[sarink]

Describe the bug

I hope that I'm simply misunderstanding or have misconfigured something, but I can't seem to figure out why objects inside useQuery().data.MyQuery.someList[index] are changing references. This means they cannot be memoized, and the application rerenders unnecessarily

• On initial load, the TodosList and every Todo renders three times
• Upon creating or updating a todo, each individual Todo in the list rerenders

Thanks :)

For skimming (if you don't want to pull the repro repo):

Reproduction

sarink/urql-perf#2

Urql version

^2.2.3

Validations

• I can confirm that this is a bug report, and not a feature request, RFC, question, or discussion, for which GitHub Discussions should be used
• Read the docs.
• Follow our Code of Conduct

[JoviDeCroock]

We have gone over this quite a few times in issues/discussions, we do our best to provide stable references but at the end of the day it isn't the most important thing. i.e. a re-render isn't the expensive thing, memoizing everything and doing deep equality might be a lot more expensive if we'd do that on every query.

The best bet for us is to ensure you have the most up-to-date data and you can optimize the re-render process yourself by means of memo and useMemo, also a re-render isn't expensive as long as you aren't doing the most expensive operation, which is touching the DOM.

Other issues #425 (comment)

[sarink]

@JoviDeCroock the code is fully memoized. But if the object references keep changing, memoizing has no effect.

It sounds like you're saying this is by design, not that big of a deal, and that if you're using urql, you should just expect rerenders?

[sarink]

I don't really accept that this impossible or that it's it is unimportant. I just rebuilt the same demo with apollo client and it behaves exactly as you'd expect, the memoization works and rerenders are prevented:

Apollo client repro: sarink/urql-perf#3

[kitten]

Just to send an update, this could be an issue with Graphcache losing the reference to the last result, but I haven't looked into this just yet

[sarink]

This is destroying our rendering performance, and with memoizations having no effect, I don't think there's anything consumers can do about it? I'm surprised more people haven't noticed/this isn't of high importance

Is this something that could be fixed in v3? Or a regression that could be fixed by downgrading?

[JoviDeCroock]

I mean, you can do a short-term fix if that is what you are looking for by leveraging JSON.stringify() as your memoization artifact, alternatively you can try to downgrade but afaict we haven't changed anything to this logic.

useMemo(() => result.data.todos, [JSON.stringify(result.data.todos)]

[JoviDeCroock]

Some initial observations from going through this

• we see three re-renders and the last adds __typename to the selection-set
• when we add __typename to the query we only see two re-renders

so I guess we can boil this down to two distinct issues, one where we aren't removing __typename correctly and secondly one where we aren't marking the array as untouched and re-using it for a subsequent result.

[JoviDeCroock]

@sarink we were just testing this and noticed you are using an old version of graphcache, when updating to the latest version we do see this working....

However we did notice that there's a bug with returning partial optimistic results, as in when you toggle the item it won't show up after the optimistic update unless we add name and done in both mutations. We are currently checking out that bug.