Angular Query Tanstack Query cleanup logic

Question

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!

Naren Murali · Accepted Answer · 2025-03-20 14:17:41Z

Looking at the documentation, I can find the DestroyRef being used to complete the stream, so .pipe(takeUntilDestroyed()) is not needed.

create-base-query.ts

  effect(() => {
    // observer.trackResult is not used as this optimization is not needed for Angular
    const observer = observerSignal()

    untracked(() => {
      const unsubscribe = ngZone.runOutsideAngular(() =>
        observer.subscribe(
          notifyManager.batchCalls((state) => {
            ngZone.run(() => {
              ...
        ...
      }),
    ),
  )
  destroyRef.onDestroy(unsubscribe)

Looks like the previous in-flight requests are not cancelled by injectQuery, I searched for a possible workaround, but did not find any.

export class SimpleExampleComponent {
  readonly #http = inject(HttpClient);

  readonly query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: ({ signal }) =>
      lastValueFrom(
        this.#http.get<Response>('https://api.github.com/repos/tanstack/query')
      ),
  }));

  reload() {
    this.query.refetch();
  }
}

Set network to 3G and click the refresh button and see the output in network tab.

Stackblitz Demo

Due to availability of signal property, we can use it with fetch API to achieve this behavior.

readonly query = injectQuery(() => ({
  queryKey: ['repoData'],
  queryFn: ({ signal }) =>
    fetch('https://api.github.com/repos/tanstack/query', {
      signal: signal,
    }).then((x) => x.json()),
}));

Collectives™ on Stack Overflow

Angular Query Tanstack Query cleanup logic

1 Answer 1

Stackblitz Demo

Stackblitz Demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related