Ag-grid server-side infiniteScroll keeps fetching data when scroll the page

Question

I am trying to have a basic server side infiniteScroll data table. I set the cacheBlockSize = 20, and maxBlocksInCache = 1. So that it loads 20 records every time from the server, and it only keeps one page of data in the cache. This setup make it easier for me to see how the data loading works. It loads the first page properly at very beginning. But when I scroll down to next 20 records, it should call the API and load new 20 records, then render them on the page. But it keeps calling the API again and again.

I set the grid option like this:

gridOptions: {
    headerHeight: 45,
    rowHeight: 30,
    rowModelType: 'serverSide',
    rowSelection: 'multiple',
    blockLoadDebounceMillis: 500,
    cacheBlockSize: 20,
    maxBlocksInCache: 1,
    pagination: false,
},

The dataSource is here:

export class MyDatasource implements IServerSideDatasource {
  getRows(params: IServerSideGetRowsParams) {
    this.searchApi.getData().subscribe(
        resp => {
            let lastRow = -1;
            if (resp['totalRecords'] <= params.request.endRow) {
                lastRow = resp['totalRecords'];
            }
            params.successCallback(resp['data'], lastRow);
        },
        error => {
            params.failCallback();
            console.log(error);
        },
    );
  }
}

Matt Nienow Matt Nienow · Accepted Answer · 2020-02-26T04:28:49

Check the documentation around caching: https://www.ag-grid.com/javascript-grid-server-side-model-infinite/#cache-configuration

If you read about the maxBlocksInCache property, it talks about what happens when it is set too low:

If used, make sure you have enough blocks in the cache to display one whole view of the table (ie what's within the scrollable area), otherwise it won't work and an infinite loop of requesting blocks will happen.

Ag-grid server-side infiniteScroll keeps fetching data when scroll the page

1 Answers