Add value into stream using RxJS: maximum call stack size

[alucardu]

I have websocket server and Apollo client/server and RxJS to detect changes in my environment. And a service which subscribes users to that websocket:

// SessionService

  private sessionsSubject = new BehaviorSubject<Array<Session> | null>(null);
  public sessions$ = this.sessionsSubject.asObservable();

  constructor(private apollo: Apollo) {this.subscribeToSessions()}

  public subscribeToSessions(): void {
    this.apollo.subscribe<SessionCreated>({
      query: sessionOperations.CREATE_SESSION_SUBSCRIPTION
    }).subscribe(async ({data}) => {
      this.sessions$.subscribe({
        next: (sessions) => this.setSessions([...sessions??[], data!.sessionCreated]),
        complete: () => console.log('complete')
      })
    })
  }

  public setSessions(sessions: Array<Session>): void {
    this.sessionsSubject.next(sessions)
  }
}

If a new session is added the sessionOperations.CREATE_SESSION_SUBSCRIPTION query is called which I subscribe to. In the subscribe I want to update the sessions with the newly created session.

But I think this is causing an infinite loop. Since this also updates the sessions$ observable which runs the adding of a session again.

[voliva]

Yes, that will cause an infinite loop. Doing next on a subject emits a new value, which will get picked up by next: (sessions) => that will add a new value, etc.

this.sessions$ is a BehaviourSubject, which has the advantage of having a method .getValue(). If all you want is append a new session and notify everyone, I would just do the following:

...
}).subscribe(({ data }) => {
  this.setSessions([...this.sessionsSubject.getValue()??[], data!.sessionCreated]);
})