[Angular query] Queries with enabled: false have their fields not behaving as expected

[JulienLecoq]

Describe the bug

When setting a query with enabled: false and calling query.refetch() in the ngOnInit life cycle callback, many of the fields of the query behave abnormally.

For exemple, the isFetching signal and isLoading signal will have their value set to false even if the query is fetching.

The isFetching and isLoading signals will be set to true only on a retry of the query.

Also, if the query results in an error, the next time the ngOnInit calls query.refetch() the query's error will not be reset to null, it will only be set to null if there is a retry of the query.

I imagine that there are some other weird things happening not listed here.

Your minimal, reproducible example

https://codesandbox.io/p/devbox/angular-query-enabled-bug-fnslsy

Steps to reproduce

Click on the reproduction URL and I guess it should be sufficient to see the issue. I'm not sure how codesandbox work :/

Expected behavior

The isFetching and isLoading signals should be set to true right after calling .refetch. During a refetch, the error signal should be set to null.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Safari

Tanstack Query adapter

angular-query

TanStack Query version

v5.64.1

TypeScript version

v5.7.3

Additional context

No response

[arnoud-dv]

Thank you for reporting this and the repro.

This happens because ngOnInit is too soon in the lifecycle. Refetch is called on the query before its effect is executed. This effect subscribes to the observer. This is done asynchronously so that input.required() signals can be used seamlessly in the query options without having to be bothered by component lifecycle.

Probably the best option is to use the query declaratively and set enabled to true using a signal.

Also, ngOnInit - or probably any lifecycle hook is not needed anymore in modern Angular, see this great talk by Matthieu Riegler.

Imperative alternatives that do work

  constructor() {
    afterNextRender(() => {
      this.query.refetch();
    })
  }

  refetchEffect = effect(() => {
    this.query.refetch();
  })

  // or in the constructor:
  constructor() {
    effect(() => {
      this.query.refetch();
    })
  }

I'll add this to the documentation I'm writing about how to work with Angular reactivity and TanStack Query.

[JulienLecoq]

Thanks for the great explanation! This shouldn't affect me but I discovered it while working on my wrapper around Angular query so I preferred to report it to be sure 👌🏻