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.