CODEWITHSUNDEEP
rxjs
Thibault Krebs
Thibault Krebs

Reputation: 23

Rxjs, Combine last query result for multiple group (combine switchMap with groupBy)

I have an issue using the operator. Basically I have multiple payslips and I want to keep a debounce for each payslip and trigger a query. I want to subscribe to only the last query that succeed for a specific payslip and if a new request is triggered for this payslip before the previous one finished, I want to cancel the previous one.

Here's a sample marble diagram for what i'm looking for:

-----1----1-----1----3----3----3----3-----1---3---1---3---1------>

(magic operators for which I'm unclear)

-------------------1-------------------3-----1---3---1---3---1--->

I have debounce and query, which I like, but it does this:

-----1----1-----1----3----3----3----3-----1---3---1---3---1------>

debounce

-------------------1-------------------3--------------------1---->

    .pipe(
        groupBy(payslip => payslip._id),
        map(group =>
          group.pipe(
            debounceTime(200),
            switchMap(payslip => httpQuery)
          )
        ),
        mergeAll()
      )

With the current solution, the merge all is grouping the switch map thus canceling even for other group. Is there a way to do what I want ?

Thanks !

Upvotes: 2

Views: 190

Answers (1)

James Y
James Y

Reputation: 161

I am struggling to find anything wrong with your code or it's outcomes.

I have put the following test code in the ThinkRx playground

const { rxObserver } = require('api/v0.3');
const { zip, timer, from, of } = require('rxjs');
const { take, map, groupBy, mergeAll, debounceTime, delay, switchMap } = 
require('rxjs/operators');

zip(
  timer(0, 50),
  from([1,1,1,3,3,3,3,1,3,1,3,1]),
).pipe(
  map(([_,i])=>i),
  groupBy(i=>i),
   map(group => group.pipe(
    debounceTime(0),
    switchMap(i=>of(i).pipe(delay(0))),  // simulates http request with know duration
  )),
mergeAll(),
).subscribe(rxObserver());

With debounce and time-for-http-request both 0 the result is: enter image description here

With time-for-http-request = 60 (note the time scale is longer): enter image description here

And then with debounce = 10: enter image description here

Is it possible in your code that the http request simply takes longer than the time between the requests, so the switchMap is correctly cancelling the earlier one?

Upvotes: 2

Related Questions