RxJs Observable Pagination

by

You are overcomplicating this problem, it can be solved a lot easier using defer operator.

Idea is that you are creating deferred observable (so it will be created and start fetching data only after subscription) and concatenate it with the same observable but for the next page, which will be also concatenated with the next page, and so on … . And all of that can be done without recursion.

Here is how the code looks:

const { defer, from, concat, EMPTY, timer } = rxjs; // = require("rxjs")
const { mergeMap, take, mapTo, tap } = rxjs.operators; // = require("rxjs/operators")

// simulate network request
function fetchPage(page=0) {
  return timer(100).pipe(
    tap(() => console.log(`-> fetched page ${page}`)),
    mapTo({
      items: Array.from({ length: 10 }).map((_, i) => page * 10 + i),
      nextPage: page + 1,
    })
  );
}

const getItems = page => defer(() => fetchPage(page)).pipe(
  mergeMap(({ items, nextPage }) => {
    const items$ = from(items);
    const next$ = nextPage ? getItems(nextPage) : EMPTY;
    return concat(items$, next$);
  })
);

// process only first 30 items, without fetching all of the data
getItems()
 .pipe(take(30))
 .subscribe(e => console.log(e));
<script src="https://unpkg.com/[email protected]/bundles/rxjs.umd.min.js"></script>

More Related Contents:

  1. Pagination in CouchDB?
  2. Angular HTTP GET with TypeScript error http.get(…).map is not a function in [null]
  3. How to do paging in AngularJS?
  4. LIMIT 10..20 in SQL Server
  5. Simple PHP Pagination script [closed]
  6. Angular 4 Interceptor retry requests after token refresh
  7. How can I close a dropdown on click outside?
  8. Optimize query with OFFSET on large table
  9. Implement paging (skip / take) functionality with this query
  10. How can I paginate a WPF DataGrid?
  11. Angular 2 beta.17: Property ‘map’ does not exist on type ‘Observable’
  12. RxJS: takeUntil() Angular component’s ngOnDestroy()
  13. SQL syntax term for ‘WHERE (col1, col2) < (val1, val2)'
  14. How to create a Scroll View with a page control using swift? [closed]
  15. How to paginate Django with other get variables?
  16. How to do page navigation for many, many pages? Logarithmic page navigation
  17. API pagination best practices
  18. RXJS Wait for all observables in an array to complete (or error)
  19. Pagination: Server Side or Client Side?
  20. How to make one Observable sequence wait for another to complete before emitting?
  21. How to make a sequence of http requests in Angular 6 using RxJS
  22. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  23. Rxjs Retry with Delay function
  24. tap() isn’t triggered in RXJS Pipe
  25. HQL – row identifier for pagination
  26. Upgrading to Angular 10 – Fix CommonJS or AMD dependencies can cause optimization bailouts
  27. How to return observable from subscribe
  28. How to do pagination using range queries in MongoDB?
  29. FormControl.detectchanges – why use distinctUntilChanged?
  30. How to pass results between chained observables

Leave a Comment