optimistic updates with onMutate seem to be delayed by a frame?
we're seeing that sometimes, ~20% of the time, doing an optimistic update with onMutate is not propagating until a frame later, resulting in a flicker.
10 Replies
adverse-sapphire•2mo ago
Can you create an issue with a reproduction?
like-goldOP•2mo ago
i will try. i think the fundamental issue is that the data signal is set in an async manner, rather than normal signal behavior which is sychronous-ish
like-goldOP•2mo ago
ok here's a basic repro: https://stackblitz.com/edit/stackblitz-starters-hn17w1mv?file=src%2Fmain.ts,src%2Findex.html
StackBlitz
optimistic update flicker - StackBlitz
An angular-cli project based on @angular/animations, @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, core-js, rxjs, tslib and zone.js
like-goldOP•2mo ago
it's a fairly subtle issue, that repro's about 20% of the time (because it has to do with js message queue timing, i think)
but, if you edit the "whatever" to just '1' or whatever, you'll see the "whatever" show up for 1 frame
maybe i should use notifyManager.batchCalls myself for the second update
if i remove "notifyManager.batchCalls" in createBaseQuery, line 113, it fixes it
adverse-sapphire•2mo ago
What is the purpose of
cancelQueries This isn't how the API is intended to be used.
Maybe it's an attempt at troubleshooting, but can you add an issue with a minimal reproduction? The cancelQueries etc is distracting and I'm not sure what you're attempting with that.like-goldOP•2mo ago
all the examples do cancelQueries: https://tanstack.com/query/latest/docs/framework/angular/guides/optimistic-updates#updating-a-list-of-todos-when-adding-a-new-todo
Optimistic Updates | TanStack Query Angular Docs
Angular Query provides two ways to optimistically update your UI before a mutation has completed. You can either use the onMutate option to update your cache directly, or leverage the returned variabl...
like-goldOP•2mo ago
i'll remove it from the example, as it doesn't hurt or help.
adverse-sapphire•2mo ago
cancelQueries is needed to avoid that running queries would overwrite your optimistic update
like-goldOP•2mo ago
i've noticed that the signal is also one-frame-late even upon mutate onSuccess. so my current workaround is to use the value from onSuccess (or the returned value from mutateAsync), instead of the query.data signal
like-goldOP•2mo ago
ok i have an alternate solution: https://tanstack.com/query/latest/docs/reference/notifyManager#notifymanagersetscheduler is this safe to do? i imagine if it's not the default..this may be not great/
NotifyManager | TanStack Query Docs
The notifyManager handles scheduling and batching callbacks in Tanstack Query. It exposes the following methods: notifyManager.batch batch can be used to batch all updates scheduled inside the passed...