Angular Query Tanstack Query cleanup logic

I'm using Angular 18 with TanStack Angular Query and have a question about handling observables in the queryFn.

In my queryFn, I'm using lastValueFrom() with an HTTP request like this:

queryFn: () => {
return lastValueFrom(this.#http.get<Array<string>>('/api/tasks'));
}


My Question:

Since lastValueFrom automatically unsubscribes once it emits a value, do I need to explicitly add .pipe(takeUntilDestroyed()) or any other cleanup logic for proper resource management?

Additionally, does Angular Query automatically cancel in-flight requests if the component is destroyed or the query is invalidated?

I want to ensure I'm following best practices for both Angular and TanStack Angular Query. Any insights would be greatly appreciated!

Continue reading...