Combining two nested observables into one is my goal. The first observable listens for valueChanges on an input, while the second queries the database. I expect to have a single observable that I can utilize with an async pipe in my Angular template.
In the example provided, the filteredUsers$ variable is currently of type
Observable<Observable<MyUser[] | null>>Observable<MyUser[] | null>The userControl represents an Angular FormControl.
this.filteredUsers$ = this.userControll.valueChanges.pipe(debounceTime(300)).pipe(
switchMap((newSearch) => {
if (newSearch === null) {
return of(null);
}
return this.userSearchGql
.fetch({
where: {
OR: [
{ firstname: { contains: newSearch } },
{ secondname: { contains: newSearch } },
{ email: { contains: newSearch } }
]
}
})
.pipe(
map((res) => {
return res.data.users;
})
);
})
);
Edit 1
I believe the issue has been resolved with the assistance of @Jules' response