How to reuse queries in Angular Query

// 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())),
  }));
}

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)),
  }));
}

@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 }
    );
  }
}

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 });
    },
  };
};

@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();
  }
}