query icon indicating copy to clipboard operation
query copied to clipboard

Angular: injectMutation skips pending state when triggered in constructor or ngOnInit

Open ThiloAschebrock opened this issue 10 months ago • 0 comments

Describe the bug

useMutation does indicate a pending state and remains idle until the mutation concludes if triggered in a Component constructor or ngOnInit lifecycle method, whereas triggering the mutation from ngAfterContentInit works as expected.

Your minimal, reproducible example

https://stackblitz.com/edit/angular-query-aqv6yuzm?file=src%2Fmain.ts

Steps to reproduce

  1. Refresh the page.
  2. Observe the state changes for the three mutations triggered in an Angular constructor, ngOnInit, or ngAfterContentInit.
  3. Notice that the two mutations triggered in the constructor and ngOnInit remain idle and do not indicate the pending state while the mutations are running.

Expected behavior

As a user, I expect the mutation to always indicate the correct idle and pending state, i.e., switch from idle to pending when a mutation has been triggered.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

  • OS: Windows, maxOS,
  • Browser: Chrome, Edge

Tanstack Query adapter

angular-query

TanStack Query version

v5.74.3

TypeScript version

v5.6.3

Additional context

No response

ThiloAschebrock avatar Apr 15 '25 00:04 ThiloAschebrock