Repository navigation
How to combine two TanStack Query results into a single object? #9915
Description
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?
Activity