How to reuse queries in Angular Query

Umar Mohammed — Sat, 07 Sep 2024 22:21:31 +0000

Having used Tanstack Query in the past I was excited to see an official adapter for Angular.

Given a basic application with the following files

// app-routing.module.ts
const routes: Routes = [
  {
    path: '',
    component: HeroListComponent,
  },
  {
    path: ':heroId',
    component: HeroDetailsComponent,
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      bindToComponentInputs: true,
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

// hero.service.ts
import { HttpClient } from '@angular/common/http';
import { inject, Injectable } from '@angular/core';
import { Hero } from './hero';
import { tap } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class HeroService {
  http = inject(HttpClient);

  heroes$ = this.http
    .get<Hero[]>('/api/heroes')
    .pipe(
      tap(() => console.log(`GET /api/heroes ${new Date().toISOString()}`))
    );

  getHero(id: number) {
    return this.http
      .get<Hero>(`/api/heroes/${id}`)
      .pipe(
        tap(() =>
          console.log(`GET /api/heroes/${id} ${new Date().toISOString()}`)
        )
      );
  }
}

//hero-list.component.ts
import { Component, inject } from '@angular/core';
import { HeroService } from './hero.service';
import { injectQuery } from '@tanstack/angular-query-experimental';
import { lastValueFrom } from 'rxjs';

@Component({
  template: `<h2>Hero List</h2>
    @if (query.isPending()) { Loading... } @if (query.error()) { An error has
    occurred: {{ query.error()?.message }}
    } @if (query.data(); as data) {
    <ul>
      @for (hero of data; track $index) {
      <div>
        <a [routerLink]="[hero.id]">{{ hero.name }}</a>
      </div>
      }
    </ul>
    } `,
})
export class HeroListComponent {
  heroService = inject(HeroService);

  query = injectQuery(() => ({
    queryKey: ['heroes'],
    queryFn: () => lastValueFrom(this.heroService.heroes$),
  }));
}

// hero-details.component.ts
import { Component, inject, input, numberAttribute } from '@angular/core';
import { HeroService } from './hero.service';
import { injectQuery } from '@tanstack/angular-query-experimental';
import { lastValueFrom } from 'rxjs';

@Component({
  template: `<h2>Hero Detail</h2>
    @if (query.isPending()) { Loading... } @if (query.error()) { An error has
    occurred: {{ query.error()?.message }}
    } @if (query.data(); as data) {
    <div>
      {{ data.name }}
    </div>
    } `,
})
export class HeroDetailsComponent {
  heroService = inject(HeroService);

  heroId = input.required({ transform: numberAttribute });

  query = injectQuery(() => ({
    queryKey: ['heroes', this.heroId()],
    queryFn: () => lastValueFrom(this.heroService.getHero(this.heroId())),
  }));
}

I wanted to use the techniques described in https://dev.to/this-is-angular/this-is-your-signal-to-try-tanstack-query-angular-35m9 to see how to reuse queries, particularly ones which depend on router params.

Creating the custom injection function and extracting out the heroQuery

import {
  assertInInjectionContext,
  inject,
  Injector,
  runInInjectionContext,
} from '@angular/core';
import { injectQuery } from '@tanstack/angular-query-experimental';
import { HeroService } from './hero.service';
import { lastValueFrom } from 'rxjs';

export const createQuery = <T, U>(
  query: (params: T) => U,
  params: T,
  { injector }: { injector?: Injector } = {}
) => {
  injector = assertInjector(createQuery, injector);
  return runInInjectionContext(injector, () => {
    return query(params);
  });
};

export function assertInjector(fn: Function, injector?: Injector): Injector {
  // we only call assertInInjectionContext if there is no custom injector
  !injector && assertInInjectionContext(fn);
  // we return the custom injector OR try get the default Injector
  return injector ?? inject(Injector);
}

export function heroQuery({ heroId }: { heroId: number }) {
  const solutionApi = inject(HeroService);
  return injectQuery(() => ({
    queryKey: ['heroes', heroId],
    queryFn: () => lastValueFrom(solutionApi.getHero(heroId)),
  }));
}

I can then use this in the hero-details component with the following changes:

@Component({
  template: `<h2>Hero Detail</h2>
    @if(query; as query) { @if (query.isPending()) { Loading... } @if
    (query.error()) { An error has occurred: {{ query.error()?.message }}
    } @if (query.data(); as data) {
    <div>
      {{ data.name }}
    </div>
    } } `,
})
export class HeroDetailsComponent implements OnInit {
  heroId = input.required({ transform: numberAttribute });

  injector = inject(Injector);

  query: ReturnType<typeof heroQuery> | null = null;

  ngOnInit() {
    this.query = createQuery(
      heroQuery,
      {
        heroId: this.heroId(),
      },
      { injector: this.injector }
    );
  }
}

However this is not as nice as the original code, we have to split the query between the component's constructor and ngOnit lifecycle hook. We also need an extra if in the component since we need to check if the query is null.

We can wrap the createQuery to tidy up the interface a bit

export const queryCreator = <T, U>(
  query: (params: T) => U,
  params: () => T,
  { injector }: { injector?: Injector } = {}
) => {
  return {
    query: null as U | null,
    init: function () {
      if (this.query) {
        return;
      }
      this.query = createQuery(query, params(), { injector });
    },
  };
};

and update the hero-component to

@Component({
  template: `<h2>Hero Detail</h2>
    @if(creator.query; as query) { @if (query.isPending()) { Loading... } @if
    (query.error()) { An error has occurred: {{ query.error()?.message }}
    } @if (query.data(); as data) {
    <div>
      {{ data.name }}
    </div>
    } }`,
})
export class HeroDetailsComponent {
  heroId = input.required({ transform: numberAttribute });

  injector = inject(Injector);

  creator = queryCreator(
    heroQuery,
    () => ({
      heroId: this.heroId(),
    }),
    { injector: this.injector }
  );

  ngOnInit() {
    this.creator.init();
  }
}

However its still not great and is starting to feel like overkill at this point. Please leave a comment below if you can point me in the right direction.

Link to source code https://github.com/umar-hai/reuse-queries-demo

DEV Community: Umar Mohammed

How to reuse queries in Angular Query