-
-
Notifications
You must be signed in to change notification settings - Fork 3.6k
-
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?
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 1 comment
-
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
Beta Was this translation helpful? Give feedback.