Observable Pagination for infinite scroll to stay up to date

Question

I am trying to get my observable to update automatically during pagination.

Only Page Trigger

When load() is called, the page observable gets triggered, but the subscription observable does not get triggered when it is updated...

pageSub = new BehaviorSubject<number>(1);
page = 1;

// in constructor...

this.posts = this.pageSub
  .pipe(
    mergeMap((page: number) => this.urql
      .subscription(this.GET_POSTS,
        {
          first: this.ITEMS.toString(),
          offset: (this.ITEMS * (page - 1)).toString()
        }
      )
    ),
    scan((acc, value) => [...acc, ...value]),
  );

// called from button

load() {
  this.page += 1;
  this.pageSub.next(this.page);
}

Only Subscription Trigger

Here a subscription change does get triggered, but when load() is called, a page change does not get triggered...

this.posts = combineLatest([this.pageSub, this.urql
  .subscription(this.GET_POSTS,
    {
      first: this.ITEMS.toString(),
      offset: (this.ITEMS * (this.page - 1)).toString()
    }
  )]).pipe(
    map((arr: any[]) => arr[1])
  );

Surely, there is a way so that the Observable gets updated with a page change and with a subscription change?

I should add that resetting the variable declaration this.posts does not work, as it refreshed the page and is not intended behavior.

Any ideas?

Thanks,

J

Can you create a stackblitz with small demo, because as far as i see your first solution should work. Can you show us what is behind ` this.urql` — Християн Христов, Mar 22 '21 at 08:11
If I call `load()` the first solution does work, however, it is technically a page observable not a combined observable, so the data does not get updated when the subscription changes, only when the page changes. Does that make sense? — Jonathan, Mar 22 '21 at 12:11
I'm not sure what you mean by "subscription changes" and what is getting called when you refer `this.urql.subscrition(...)` — Християн Христов, Mar 22 '21 at 12:18
I have an external database. Normally, if I update a database value, it will be updated immediately on the website because the observable is a subscription to the database using websockets. However, I want this to still work when using pagination. The first example actually subscribes to the pagination change, but not to the database changes. When a page change is triggered (by `pageSub.next()`), the page is updated. However, when a database value is changed, it does not get updated on the website immediately. I want the observable triggered on a db value change, and on `pageSub.next()`. — Jonathan, Mar 22 '21 at 12:43

score 0 · Accepted Answer · answered Mar 23 '21 at 04:52

Got it:

mainStream: BehaviorSubject<Observable<any>>;

posts!: Observable<any>;

constructor(private urql: UrqlModule) {

  this.mainStream = new BehaviorSubject<Observable<any>>(this.getPosts());

  this.posts = this.mainStream.pipe(mergeAll());

}

async load() {
  this.page += 1;
  this.mainStream.next(this.combine(this.mainStream.value, this.getPosts()));
}

getPosts() {
  return this.urql.subscription(this.GET_POSTS,
    {
      first: this.ITEMS.toString(),
      offset: (this.ITEMS * (this.page - 1)).toString()
    }
  )
}

combine(o: Observable<any>, o2: Observable<any>) {
  return combineLatest([o, o2]).pipe(
    map((arr: any) => arr.reduce((acc: any, cur: any) => acc.concat(cur)))
  );
}

Observable Pagination for infinite scroll to stay up to date

1 Answers1