Angular query: Optimistic updates are not synchronous

[stevesan]

Describe the bug

Here's a stackblitz that repro's the issue about 20% of the time (I think it's timing related): https://stackblitz.com/edit/stackblitz-starters-hn17w1mv?file=src%2Fmain.ts,src%2Findex.html

If you click "edit" and change the "whatever" to just "1", then tab out to trigger blur, you'll see the "whatever" show up for 1 frame. I think this is happening because the optimistic update (which should set the title to "1") is not happening until the next frame. So when I set the "isEditingTitle" signal to false, it flickers the old title for 1 frame. I would expect the optimistic update to be immediate and synchronous, like how normal signals behave, so this flicker never happens.

Generally speaking, this can happen whenever you have a UX that let's the user preview an edit before committing it. In this case, the preview is the input text box, and commiting it is blurring. It would be even more noticeable if the input field looked exactly like the non-editing text.

What are people's thoughts on this? Is this not a use case many encounter?

Your minimal, reproducible example

https://stackblitz.com/edit/stackblitz-starters-hn17w1mv?file=src%2Fmain.ts,src%2Findex.htmlhttps://stackblitz.com/edit/stackblitz-starters-hn17w1mv?file=src%2Fmain.ts,src%2Findex.html

Steps to reproduce

1. Click the "edit" button
2. Change "whatever" to just "w"
3. Press Tab to trigger blur and finish editing.

Expected behavior

20% of the time, you'll see "whatever" show up for 1 frame. Desired behavior: I would expect the optimistic update to immediately take effect, and the text immediately shows "w".

How often does this bug happen?

Sometimes

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Google Chrome, Version 141.0.7390.54 (Official Build) (arm64)

Tanstack Query adapter

angular-query

TanStack Query version

^5.69.1

TypeScript version

^5.6.3

Additional context

No response

[stevesan]

i have a workaround that's OK-ish: read the signal, but ignore the value - instead, get the latest value from the cache directly, so use getQueryData. reading the signal is still good, so your update code is subscribed to it. but when other signals trigger an update, like isEditingTitle, reading the cache will get the optimistically updated value correctly.

the worst part of this solution, however, is you now have to be careful about the order of your signal sets: your mutation must come first, then your other signals. not great.