How can I combine two TanStack Query results into a single object?

Question

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?

Tarun Pal · Accepted Answer · 2025-11-24 17:38:50Z

-4

const userActive = injectQueries(() => ({
  queries: [this.user, this.roles],
  select: (user, roles) => {
    if (!user || !roles) return null;
    return {
      ...user,
      roles
    };
  }
}));

answered Nov 24 at 17:38

Tarun Pal

11 bronze badge

New contributor

Sign up to request clarification or add additional context in comments.

2 Comments

Jon Nov 24 at 17:51

it's not valid code.

Tom S Nov 24 at 19:49

injectQueries is under development for Angular Query, so this won’t work in the latest version as of writing (5.90.13).

Collectives™ on Stack Overflow

How can I combine two TanStack Query results into a single object?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related