Merging the output of an Observable with an established RxJS Subject without the need to subscribe

I currently have an existing rxjs Subject and I am looking for a way to call another Observable and seamlessly merge the results of that observable into my Subject. My goal is to achieve this without explicitly calling subscribe on the child Observable.

Unfortunately, using Subscribe.next() necessitates providing a value, and utilizing switchMap directly on the subject does not trigger the switchMap and child call as intended.

// initializing subject in class definition
mySubject$ = new Subject();

// function to call api and observable
callApi(options) {
   // obtaining an observable from the api call
   const apiResults$ = getApiResults(options);

   // this method works but it requires subscribe
   apiResults$.subscribe(results => this.mySubject$.next(results));

   // how can I effectively combine the results into the Subject without 
   // relying on the subscribe method (above)
   mySubject$.next(????);
}

Answer №1

If you want to monitor events happening during API calls, there's a more effective method.

Instead of just listening, return an observable for the API call with a tap side effect that will prompt the subject to emit the outcome.

mySubject$ = new Subject();

callApi(options) {
   return getApiResults(options).pipe(tap(res=>mySubject$.next(res)));

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular may struggle to detect changes when it comes to nested components

I encountered a similar issue to mine on Stack Overflow. However, despite following the steps provided in the solution, my implementation is still not working. Here is the structure of my components: Dashboard ActionButton Milestone Table SupplierSe ...

Inner output not displaying on the screen

Based on the outcome of the graphql query, certain items are generated within the function contact export const Whitelist: React.FunctionComponent = (props) => { const [userData, setUserData] = useState<UsersQueryHookResult>(''); c ...

Utilize puppeteer and web-vitals in NextJS to retrieve the web performance metrics of a website

I'm currently working on a basic tool in NextJS that uses puppeteer to fetch web vitals data from a given URL. However, I'm facing an issue where the results are not being printed out. What could be causing this problem? const browser = await pup ...

The object is not a valid function

Within this class object, I have an instance of a class that I am unable to call its functions within. Despite the IDE allowing me to call the getPoistionDiagram function: export class NodeW { childrenIds: string[]; diagram?: { coordinates: { ...

Sign up for a variety of HTTP observables subscriptions

I have a collection of Observables stored in activatedRoute.data.example and I need to listen for the most recent value emitted. private data$ = forkJoin( this.activatedRoute.data.pipe( map(({ examples }) => examples) ) ); ngOnInit(): void { ...

Setting up ESLint for TypeScript with JSX configuration

I am encountering problems with TypeScript configuration. Below is the code snippet from my tsconfig.json: { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLib ...

Applying Validators manually in Angular 2 beta 17

We are currently working on a legacy project that needs to be maintained until the final version with angular-final is deployed. Once we upgrade to the final version, I will be able to easily apply conditional Validators using: this.myForm.controls[&apos ...

Understanding the Usage of FormData in NextJS

I'm trying to read fetch's body contents. Here's the code I'm using: fetch('/api/foo', { method: 'POST', body: new FormData(formRef.current), }); https://i.sstatic.net/6YB1V.png Now I need to parse the body dat ...

Contrasting Dependency Injection with Exporting Class Instances

I've been diving into the world of TypeScript and working on enhancing my skills as a web developer. One project I'm currently focused on is a simple ToDo app, which you can find here: https://github.com/ludersGabriel/toDo/tree/dev/backend. My q ...

Discovering the process of reaching service members through an HTML View

Currently, I am in the process of learning Angular 2 and find myself unsure about the most efficient way to update the view. For instance, let's say I have two components: User and Main. The User component retrieves a list of users from the UserServ ...

The react-bootstrap module does not have any members available for export

I'm looking to incorporate the npm module react-bootstrap from this link into my Layout component, following the ASP.NET Core 2.1 template client project structure. The challenge I'm facing is that the template uses a .js file extension, but I pr ...

Jest - managing parent class methods during unit tests

The code snippet provided demonstrates a class called First extending TelemetryFramework with specific props and states, containing a method named getData. This method retrieves confidential data and logs telemetry information. However, running unit tests ...

Incorporate TypeScript into your React projects for improved type

Currently, I am immersing myself in learning React with Typescript. One of the challenges I am facing is related to a specific view I have created. index.tsx import React from 'react' import { CButton } from '@coreui/react' import { us ...

Angular, Observable, and the wonders of debounceTime

I have a function within an Angular 4 project called reload() that can be triggered by other functions, A() and B(), at any given time. I am looking to implement a debounce feature for reload() so that it is only executed after a specified duration (X mill ...

What is the proper way to type a collection and put it into action?

I am looking for a way to create an object that mimics a set. Specifically, I want the transaction id to act as a key and the transaction details as the value. To achieve this, I created the following: type TransactionDetail = { [key: TransactionId]: Tra ...

Unable to access req.body in NextJS

I've been attempting to access req.body within my API, but for some reason I am unable to retrieve it. Upon checking the request tab in the console, I noticed that the string I need is present. Additionally, here is another image . Here is the code ...

Exploring the differences between Angular's @Input and @Output directives and utilizing Injectable Services

When considering the differences between @Input/@Output in parent and child components versus using services that are instantiated only once with dependency injection (@Injectable()), I find myself questioning whether there are any distinctions beyond the ...

Comparing ESLint and TSLint: Which One Is Right for You

After looking through numerous sources, I came up empty-handed regarding this particular question. Could anyone provide insight on the drawbacks of using Eslint compared to TsLint? What are the reasons for transitioning to ESLint? ...

Upgrade Angular 8 by substituting interconnected filter and order pipelines with custom functions

According to the Angular documentation Filtering and sorting operations can be resource-intensive. When Angular invokes these pipe methods frequently, it can lead to a degraded user experience, especially with even moderately-sized lists. Misuse of filt ...

Compilation of Angular 6 project is failing due to error TS1005: Expected ',' instead of the symbol used

I keep encountering an error message whenever I try to compile my code. ERROR in src/app/form/form.component.ts(22,39): error TS1005: ',' expected. Below is the snippet of code where the error is pointing: import { Component, OnInit } from &ap ...