Derived queries | Query composition

[kiesman99]

Hey @NetanelBasal first of all thank you very much for your work on @ngneat/elf and @ngneat/query and all the other awesome packages!

I am currently working with @ngneat/query and i've come to the point where query composition is needed. Unfortunately i am not quite sure on how to implement this with @ngneat/query. I've come up with a very small sample which should replicate the need i have in a bigger application. If something is not clear feel free to hit me up!

There are some discussions like this at tanstack/query but as tanstack/query relies on promises and ngneat/query on observables (duo to HttpClient) i have issues comparing these both.

DISCLAIMER: Please do not be concerned if the models i am gathering make sense. This example should only re-create an issue in the smallest possible version.

Stackblitz
Git Repo

Models

export interface Permission {
  id: string;
  name: string;
}

export interface User {
  username: string;
  permissionIds: string[];
}

Services

const permissions: Permission[] = [
  { id: '1', name: 'admin' },
  { id: '2', name: 'read' },
  { id: '3', name: 'write' },
  { id: '4', name: 'bulk' },
];

@Injectable({
  providedIn: 'root',
})
export class PermissionService {
  loadAllPermissions() {
    return of(permissions).pipe(delay(4000));
  }
}

// -----

const currentUser: User = {
  username: 'johndoe',
  permissionIds: ['2', '4'],
};

@Injectable({
  providedIn: 'root',
})
export class UserService {
  getCurrentUser() {
    return of(currentUser).pipe(delay(2000));
  }
}

As you can see i have two services. The UserService is able to fetch the current user and the PermissionService is able to fetch all available permissions. The User-Model however returns a list of permissionIds.

QueryServices

@Injectable({
  providedIn: 'root',
})
export class PermissionQueryService {
  private permissionService = inject(PermissionService);
  private useQuery = inject(UseQuery);

  getAllPermissions() {
    return this.useQuery(['permissions'], () => {
      return this.permissionService.loadAllPermissions();
    });
  }
}

// --- 

@Injectable({
  providedIn: 'root',
})
export class UserQueryService {
  private userService = inject(UserService);
  private useQuery = inject(UseQuery);

  getCurrentUser(userId: string) {
    return this.useQuery(['user', userId], () => {
      return this.userService.getCurrentUser();
    });
  }
}

I have provided myself a query service for each service class which handles fetching the data and saving it.

Pages

Now i want to have a page which displays all available permissions. This one is easy:

<ng-container *subscribe="permissions$ as permissions">
  <h1>All available permissions</h1>

  <p *ngIf="permissions.isLoading">Loading...</p>
  <ul *ngIf="permissions.isFetched">
    <li *ngFor="let permission of permissions.data">
      {{ permission.name }}
    </li>
  </ul>
</ng-container>

@Component({
  selector: 'app-all-permissions-page',
  standalone: true,
  imports: [CommonModule, SubscribeModule],
  templateUrl: './all-permissions-page.component.html',
})
export class AllPermissionsPageComponent {
  permissions$ = inject(PermissionQueryService).getAllPermissions().result$;
}

However i also want to have a user-page which displays some user data all permission names which the user has access to.
As i already fetched all permissions i want to reuse this query. Thus i only need to fetch the currentUser, go through the list of permissionIds and match them against the already fetched permissions:

<ng-container *subscribe="user$ as user">
  <h1>User Detail</h1>
  <h2>Infos</h2>
  <p *ngIf="user.isLoading">Loading...</p>
  <div *ngIf="user.isFetched">
    <span><b>Username:</b> {{ user.data.username }}</span>
  </div>

  <ng-container *subscribe="permissions$ as permissions">
    <h2>Permissions</h2>
    <p *ngIf="permissions.isLoading">Loading....</p>
    <ul *ngIf="permissions.isFetched">
      <li *ngFor="let permId of user.data.permissionIds">
        {{ permissionById(permissions.data, permId)?.name }}
      </li>
    </ul>
  </ng-container>
</ng-container>

@Component({
  selector: 'app-user-page',
  standalone: true,
  imports: [CommonModule, SubscribeModule],
  templateUrl: './user-page.component.html',
})
export class UserPageComponent {
  private userQueryService = inject(UserQueryService);
  private permissionQueryService = inject(PermissionQueryService);

  user$ = this.userQueryService.getCurrentUser('my-id').result$;

  permissions$ = this.permissionQueryService.getAllPermissions().result$;

  permissionById(
    permissions?: Permission[],
    id?: string
  ): Permission | undefined {
    if (!permissions || !id) {
      return undefined;
    }
    return permissions.find((permission) => permission.id === id);
  }
}

(The permissionById could be either memoized or a pipe).

This works, however it would be awesome to have something like:

  permissionsOfUser(userId: string) {
    return this.userQueryService.getCurrentUser(userId).result$.pipe(
      filterSuccess(),
      map((query) => query.data),
      switchMap((user) =>
        this.getAllPermissions().result$.pipe(
          filterSuccess(),
          map((query) => query.data),
          map((permissions) => {
            return user.permissionIds.reduce((acc, curr) => {
              const permission = permissions.find((perm) => perm.id === curr);
              if (permission) {
                return [...acc, permission];
              }

              return acc;
            }, [] as Permission[]);
          })
        )
      )
    );
  }

But now i don't have information about query.isLoading, query.isError etc.

Do you have a suggestion on how to do something similar to the provided code?
If we come up with some recipes i would be happy to contribute them to this repository!

[kiesman99]

Maybe something like this, but the downside of this is having multiple permission arrays somewhere in the store. If permissions would be a few thousand entities this could be very bad.

  // duplicate all permissions and current user in store
  // make use of UserService in PermissionQueryService
  permissionsOfUser2(userId: string) {
    return this.useQuery({
      queryKey: ['permissions-of-user', userId],
      queryFn: () => {
        return this.permissionService
          .loadAllPermissions()
          .pipe(
            switchMap((permissions) =>
              this.userService
                .getCurrentUser()
                .pipe(
                  map((user) =>
                    this.resolvePermissions(permissions, user.permissionIds)
                  )
                )
            )
          );
      },
    });
  }

Github

[luii]

What you could do is combine the getCurrentUser(userId) with the getAllPermissions() like this

Both of them need to have emitted atleast once, since query is emitting a loading status object it shouldn't be a problem.
There is probably a better solution to this but this is something i would use when trying to compose them together

  userPermissions$ = this.user$.pipe(
    withLatestFrom(this.permissions$),
    map(([user, permissions]) => {
      user?.data?.permissionIds.reduce((acc, curr) => {
        const permission = permissions.data?.find((perm) => perm.id === curr);
        if (permission) return [...acc, permission];
        return acc;
      }, [] as Permissions[]);

      return [user, permissions];
    })
  );

Also this way you can keep the results and transform your data.
I've also added a stackblitz with your files from above and added a refetchIntervall to see changes, it's quick and dirty, there is a lot that could be improved but i think this could be a starting point for you

https://stackblitz.com/edit/angular-ivy-xhag4g?file=src/app/user-page.component.ts

[kiesman99]

Thanks for your quick answer!

The Stackblitz example you've provided does not work for me unfortunately. The Permissions is not leaving the loading state, but i totally get the example.

I like how the observable userPermissions$ is constructed, however i don't like the index-based access in the template. This could be resolved by returning an object for example.

If the userPermissions query should be re-usable, because i have for example a user-profile page which shows my profile and a user-detail page which is used by admins to view a users permission, would you extract the logic into a separate service or the permissionsQueryService or would you do something really different?

[kiesman99]

@luii I think you have to use combineLatestWith instead of withLatestFrom.

As far as i understand withLatestFrom will include a snapshot of the provided observable every time the parent observable emits one value. As the user request finishes faster than the permission request, the permission request change will not be emitted to the observable stream unless the user query will re-trigger. combineLatestWith will subscribe on the given observable and will thus notice that the permissions request is now fetched.

Modified Version

[luii]

@kiesman99 Somehow it didn't saved the change, i'm sure i had it using combinLatestWith. Sorry my bad, but thanks for debugging.

[NetanelBasal]

@kiesman99 use mapResultData

[kiesman99]

Hey, thanks for your answer!

As far as i understand mapResultData it only helps if the combined value isn't a query.

const userPermissions = ["123", "456"];

permissionsOfUser$ = this.permissionQueryService
  .getPermissions()
  .result$.pipe(
    mapResultData((data) =>
      data.filter((permissions) =>
        permissions.filter((perm) => userPermissions.include(perm.id))
      )
    )
  );

But if userPermissions would be gathered from another query this would not work. Then i would have to do something like:

permissionsOfUser$ = combineLatest({
  userPermissionsQuery: this.userQueryService
    .getUserPermissionIds()
    .result$.pipe(filterSuccess()),
  permissionsQuery: this.permissionQueryService
    .getPermissions()
    .result$.pipe(filterSuccess()),
}).pipe(
  map(({ userPermissionsQuery, permissionsQuery }) => {
    // some logic that filters the data
  })
);

or

permissionsOfUser$ = this.userQueryService.getUserPermissionIds().result$.pipe(
  filterSuccess(),
  switchMap((userPermissionIdsQuery) =>
    this.permissionQueryService.getPermissions().result$.pipe(
      mapResultData((permissions) => {
        // filter permissions with previously gathered userPermissionIds
      })
    )
  )
);

In the last example the order is very important, because mapResultData is not able to map the result of type Data to type T. The mapping function expects a returnType of Data. Therefore i would have to load the userIds first to map the result of getPermissions(): Permission[] into a filtered Permission[].

---

If i understand the usage of mapResultData wrong could you provide an example? The predicate in the documentation's example seems to be already known as described in the first snipped in this answer.

Thank you!

[NetanelBasal]

Your last examples are correct. What's the issue?