How to combine two TanStack Query results into a single object?

[jon9090]

I have two separate queries using @tanstack/angular-query:

roles = injectQuery(() => ({
  enabled: this.user.data(),
  queryKey: ['roles'],
  queryFn: () =>
    lastValueFrom(getRoles({ roles: this.user.data().roles })),
}));

user = injectQuery(() => ({
  queryKey: ['user'],
  queryFn: () => lastValueFrom(getUser()),
}));

I want to keep these queries separate, but in the UI I want to consume them as one combined object, e.g.:

<div *ngIf="user.data() as user">
  roles: {{ user.roles.length }}
</div>

Ideally something like:

userActive = injectQueries(() => ({
  queries: [this.user, this.roles],
  select: (user, roles) => this.toUser(user, roles),
}));

toUser(user, roles) {
  return { ...user, roles: roles };
}

But I can't figure out how to combine the results like this.
I also tried a computed signal, but computed() returns null until both queries load, and I'd prefer to stay within the TanStack Query API:

activeUser = computed(() => {
  const user = this.user.data();
  const roles = this.roles.data();
  if (!user) return;
  if (!roles) return;

  return this.toUser(user, roles);
});

Is there a built-in way in TanStack Query for Angular to derive/merge the results of two queries into one object (similar to injectQueries + select), while still keeping both queries independent?

[TkDodo]

not sure if injectQueries supports combine but the query-core does, so the idea is:

userActive = injectQueries(() => ({
  queries: [this.user, this.roles],
  combine: ([user, roles]) => this.toUser(user, roles),
}));

looking at the type signature of injectQueries, it does support combine too:

query/packages/angular-query-experimental/src/inject-queries.ts

Lines 204 to 214 in 3bf9268

	export interface InjectQueriesOptions<
	T extends Array<any>,
	TCombinedResult = QueriesResults<T>,
	> {
	queries:
	| readonly [...QueriesOptions<T>]
	| readonly [
	...{ [K in keyof T]: GetCreateQueryOptionsForCreateQueries<T[K]> },
	]
	combine?: (result: QueriesResults<T>) => TCombinedResult
	}

[JohannesIBK]

ngneat/query has a very useful helper function https://github.com/ngneat/query?tab=readme-ov-file#intersectresults-1. Their version is a lot more useful than the combine, because it returns a QueryResult. It would be nice if we get a similar version. Also the current version of injectQueries seems to be broken.

[JulienLecoq]

injectQueries is still in development?

[JohannesIBK]

Yes, e.g the types for the combine function are broken;

readonly resource = injectQueries(() => ({
    queries: [this.service.getData1(this.id()), this.service.getData2(this.id())],
    combine: ([res1, res2]) => ({ x: res1.isSuccess(), y: res2.isSuccess() }),  // TypeError res1.isSuccess is not a function
  }));

[TkDodo]

must be an angular specific issue, works fine in react.

[JohannesIBK]

Yes, it is even marked as experimental and the docs mention that it is broken.

[JulienLecoq]

I wasn't sure since it's been a very long time that it is in that state. I thought the doc was just not up to date.

[luckberonne]

yeah I wouldn't reach for injectQueries + combine here yet, like JohannesIBK said it's still experimental and the combine types are broken on angular (the isSuccess() thing).

honestly the computed() you already have is the right call, the null until both load isn't really a bug — it just means the derived value doesn't exist yet while one of them is still loading. you just guard for it in the template the same way you were already doing with user.data():

activeUser = computed(() => {
  const user = this.user.data();
  const roles = this.roles.data();
  if (!user || !roles) return undefined;
  return this.toUser(user, roles);
});

@if (activeUser(); as user) {
  <div>roles: {{ user.roles.length }}</div>
}

both queries stay independent (own key, own cache, own refetch), computed just reads their signals and re-runs when either changes. if you want combined loading/error instead of the single null check you can pull those out too:

isLoading = computed(() => this.user.isLoading() || this.roles.isLoading());

works today without touching the experimental stuff. can swap to combine later once it's stable for angular.