Try to use within forkJoin, get issue to display in html.

[peterhe2000]

So 1 is all good, can see both get requested at the same time.
However 2 is not display anything in UI.
Am i miss something?

[luii]

You are trying to forkJoin two QueryResults together, this is the problem.

Okay what is happening there, let me explain. By the looks of it you've wrapped the get user and get todos into a UseQuery and now you are trying to forkJoin both the user and todos query together.
forkJoin is constructed to await all observables (until they've pushed something) that it got passed to, but in order, but what now happens is that as soon as they get called, they'll likely emit a value which is kept inside the wrapped UseQuery and therefore it emits this update to the forkJoin, but what also happens is that both observables will close as soon as they have emitted once.

To say it basically, you cant wrap the both queries into a forkJoin. You need to put the forkJoin into a UseQuery so that its fetches it for you.

export class Service {
  ...

  public getTodos() {
    return this._http.get(`...`);
  }

  public getUsers() {
    return this._http.get(`...`);
  }
}

@Component({
  standalone: true,
  imports: [NgIf, NgForOf, AsyncPipe],
  template: `
    <ng-container *ngIf="(queryUsersAndTodos$ | async) as usersAndTodos">
      <div *ngIf="usersAndTodos.isLoading">Loading...</div>

      <p *ngIf="usersAndTodos.isError">Error...</p>

      <ul *ngIf="usersAndTodos.isSuccess">
        <li *ngFor="let item of usersAndTodos.data">
          {{ item.users | json }}
          {{ item.todos | json }}
        </li>
      </ul>
    </ng-container>
  `,
})
export class Component {
  private _service = inject(Service); // the one from above
  private _useQuery = inject(UseQuery);

  public queryUsersAndTodos$ = this._useQuery(['todosAndUsers'], () => {
    return forkJoin({
      users: this._service.getTodos(),
      todos: this._service.getUsers()
    }).pipe(/* do some mapping if you want */)
  })
}

[luii]

@peterhe2000 i would also not explicitly .subscribe to an observable inside the component since that could lead to the Ehcaiwc Error (NG0100: Expression has changed after it was checked), its better to let angular handle the subscription by using the async pipe.

[peterhe2000]

Thank you @luii. I am using forkjoin and subscribe to demo the problem. I do use async pipe in my project most of time.