Angular RxJS function not calling HTTP request

Question

I have an angular store where I try to call some code, that is supposed to perform an HTTP request in an interval. This is supposed to call and HTTP endpoint and update the state of an angular store every 5 seconds.

All my console.log statements are called correctly in the interval, but in the network tab of my browser there are no outgoing requests being sent.

I have tried with both switchMap and mergemap, but neither of them are calling the endpoint correctly.

   updateLeaderBoardState(filterBy: CompetitionFilteringOptions) {
    const poll = of({}).pipe(
        switchMap(_ => {
            console.log('polling from server ');
            const httpRes = this.endpoint.listLeaderboards(this.storeRequestStateUpdater, filterBy);
            console.log(httpRes);
            return httpRes;
        }),
        map((leaderboards: LeaderboardV2[]) => {
            console.log(leaderboards);
            const currentUser = leaderboards[0].entries.find(entry => entry.userName === 'petar.vuksanovic' || entry.userName === "legenden420");
            currentUser.me = true;
            const currentUserPoints = currentUser.points;
            console.log(currentUserPoints);
            return {
                leaderboards,
                currentUserPoints
            };
        }),
        delay(5000),
        repeat(),
    );
    poll.subscribe(next => {
        const {leaderboards, currentUserPoints} = next;
        this.setState(({
            ...this.state,
            leaderboards,
            currentUserPoints
        }));
        });
    }

How can I make the request call correctly and not just return the previous state?

UPDATE:

I refactored my code based on the example provided in the comments. But there is still no HTTP request fired

    updateLeaderBoardState(filterBy: CompetitionFilteringOptions) {
     interval(5000).pipe(
        mergeMap(_ => {
            console.log('polling from server ');
            const httpRes = this.endpoint.listLeaderboards(this.storeRequestStateUpdater, filterBy);
            const otherHttp = this.endpoint.testRequest();
            console.log(otherHttp);
            console.log(httpRes);
            return httpRes
        }),
        map((leaderboards) => {
            console.log(leaderboards);
            const currentUser = leaderboards[0].entries.find(entry => entry.userName === 'petar.vuksanovic' || entry.userName === "legenden420");
            currentUser.me = true;
            const currentUserPoints = currentUser.points;
            console.log(currentUserPoints);
            return {
                leaderboards,
                currentUserPoints
            };
        }),
    ).subscribe(next => {
        const {leaderboards, currentUserPoints} = next;
        console.log(next);
        this.setState(({
            ...this.state,
            leaderboards,
            currentUserPoints
        }));
        });
    }

Answer 1

I try with a similar code

ngOnInit(): void {
    const poll = of({}).pipe(
      switchMap(_ => {
        const httpRes = this.testService.test();
        console.log(httpRes);
        return httpRes;
      }),
      map(res => {
        console.log(res);
        return res;
      }),
      delay(5000),
      repeat()
    )

    poll.subscribe(res => {
      console.log(res);
    });
  }

that work fine so i have few question.
Your console.log(leaderboards); show something with data ?
If it's the case, you probably have filter on your network console but your call is trigger correctly.
If it's not the case, this.endpoint.listLeaderboards(this.storeRequestStateUpdater, filterBy); return an observable ?