Angular 8 Http multiple calls or streaming

Question

im using Angular8, my problem is: i have a table which sends a request to my server to get the records, at the moment the server just "SELECT * from TABLE" and return the whole data at once.

problem is now that "TABLE" is very big and it takes time to load the table.

i want to make a first call to the server and "SELECT * from TABLE limit 1000" and then execute another call and load the rest of the data. but i can't find how its possible to return only one observable and "stream" the results..

the table component looks like this:

this.apiService.loadTable().subscribe(data => { this.source.load(data) })

(where this.source.load is a function of ngx-smart-table)

i want that the loadTable function will update the data when one of the request finishes.. how can i accomplish that? i didn't find how i can take different http requests and emit their results on a single observable object..

thanks!

Answer 1

Normally you do those kind of things with some pagination logic. That could work for example like this:

this.apiService.loadTable(pageNumber, pageSize).subscribe(data => { this.source.load(data) })

// pageNumber is the actual number (initially 1)
// pageSize defines the amount of datasets you want to load. 

Then, in your service and in your backend you have to implement that logic as well to only retrieve certain data.

For the SQL implementation you might want to have a look here: SQL Server query with pagination and count

Hope that helps.

Answer 2

Pushing all records to the client is often a bad idea. It is best you tie it to some user action that indicates the user wants more records eg clicking on a "more" button, scrolling to the bottom of the table etc.

But if you must, you can always "re-subscribe" in the previous subscription. In the code below, loadData calls itself if there is more record from the server:

...
loadData (pageNumber = 1, pageSize = 20) {
    this.apiService.loadTable(pageNumber, pageSize).subscribe(response => {
        this.source.load(response.data);
        if (pageNumber < response.totalPageCount) {
             loadData(pageNumber++, pageSize);
        }
    })
}
...

ngx-smart-table already includes pagination, so I recommend you stick to that.

Someone else also suggested using websockets, but that comes with its own set of cons and pros.