subscribing to nested observables - rxjs

Question

I'm creating an observable that needs to perform a few steps, each step is reliant on the previous - for example something like get an ID, use that ID to get a user, use that user to get an article. Each step makes a call to the database, which in turn returns its own observable. I'm really not sure how to deal with nested observables without subscribing to them, or ensure that when the outer observable is subscribed to eventually all the nested observables are subscribed to as well.
Example:
newArticle(article: Article): Observable<any> {
// db api returns an observable of requests
return this.db.get(`select id from user_ids where name = ${article.name}`).pipe(map((id) => {
return this.db.get(`select user from users where user_id = ${id}`).pipe(map((user) => {
return this.db.put(`insert into articles(user_name, title, content) values (${user.name}, ${article.title}, ${article.content});
}));
}));
}
Using this current method doesn't work, when the observable returned from newArticle is subscribed to only the outermost observable is subscribed and executed it seems. Is there something I'm missing in the way to deal with nested observables? I'm relatively new to rxjs and having a hard time completely grasping observables. Any help would be greatly appreciated.

Answer 1

In RxJS, the solution to avoid nested subscriptions is to use a "Higher Order Mapping Operator" (switchMap, mergeMap, concatMap, exhaustMap). These operators will subscribe to an "inner observable" for you and emit its emissions.
I won't go into the differences between these operators here, but switchMap will work for your case.
Your sample code is very close; you can basically use switchMap instead of map.
function newArticle(article: Article) {
return this.db.get(`select id from user_ids where name = ${article.name}`).pipe(
switchMap(id => this.db.get(`select user from users where user_id = ${id}`)),
switchMap(user => this.db.put(`insert into articles(user_name, title, content) values (${user.name}, ${article.title}, ${article.content}`))
);
}
You may find the code easier to follow if you define separate functions with specific purpose:
function getUserIdForArticle(article: Article): Observable<string> {
return this.db.get(`select id from user_ids where name = ${article.name}`);
}
function getUser(id: string): Observable<User> {
return this.db.get(`select user from users where user_id = ${id}`);
}
function storeArticle(user: User, article: Article): Observable<Article> {
return this.db.put(`insert into articles(user_name, title, content) values (${user.name}, ${article.title}, ${article.content}`);
}
function newArticle(article: Article) {
return getUserIdForArticle(article).pipe(
switchMap(id => getUser(id)),
switchMap(user => storeArticle(user, article))
);
}