Set pagination config after server data was received

[mbolli]

I want to:

• always show the pagination summary
• only show the actual pagination if the data set exceeds the paging limit

So, inside the Config.server.data method I call updateConfig():

       const defaultConfig: Partial<Config> = {
            pagination: { // default pagination
                limit: this.config.itemsPerPage ?? 10,
                summary: true,
                server: {
                    url: (prevUrl: string, page: number, limit: number) => {
                        query.set('page', (++page).toString());
                        query.set('limit', limit.toString());
                        return `${this.config.dataUrl}?${query.toString()}`;
                    },
                },
            },
            server: {
                data: async (opts: ServerStorageOptions): Promise<StorageResponse> => {
                    try {
                        const response = await this.api.request('GET', opts.url, null, {
                            'Content-Type': 'application/json',
                        });

                        if (typeof response.error !== 'undefined') {
                            throw response;
                        }

                        // override pagination
                        const needsPagination = response.pagination?.items > response.pagination?.limit;
                        this.table.updateConfig({
                            pagination: Object.assign(defaultConfig.pagination, {
                                buttonsCount: needsPagination ? 2 : 0,
                                nextButton: needsPagination,
                                prevButton: needsPagination,
                            }),
                        });

                        console.log(this.table.config.pagination);

                        return {
                            data: response.data,
                            total: response.pagination?.items ?? response.data.length,
                        }
                    } catch (e) {
                        Api.errorHandler(e, 'modal');
                    }
                    return { data: [], total: 0 };
                },
                url: this.config.dataUrl,
            },

This works, 95% of the time. However:

• if it works (sets pagination config to {... buttonsCount: 2, nextButton: true}:
  • sometimes the data() callback gets called again -> thus making a second, identical request to the server
  • sometimes this happens even three times
• if it does not work (all items fetched, no pagination)
  • data() is called the first time: it sets the correct pagination config and issues a request
  • then the data() method gets called again and has the wrong ServerStorageOptions.url (missing the pagination params) -> thus it sets the wrong pagination config = {... buttonsCount: 0, nextButton: false}
  • if I set a break point on the first line in the data() handler, this case does not happen anymore which leads me to believe some kind of race condition is happening

I ask myself if calling updateConfig() in requestAnimationFrame() is officially supported ?