Supernectar
Supernectar

Reputation: 11

Managing Refresh/Cancel functionality in AG Grid Infinite Row Model

While migrating from the client-side row model to the infinite row model, my team and I are attempting to preserve the functionality of our custom Refresh/Cancel button.

In the client-side row model, implementing this was straightforward since we could track previously loaded data and manipulate it through the rowData grid option. The integration with react-query allowed us to easily handle interruptions and restore the previous state.

However, with the infinite row model, managing the interruption state has become increasingly complex, especially due to the limited out-of-the-box support for react-query. The main challenge is distinguishing between API calls triggered by:

Our goal is to allow users to cancel only the refresh-triggered API calls while keeping other API calls (e.g. for pagination) uninterrupted. This creates complex scenarios, such as the following:

  1. Click the Refresh button to trigger a new API call.
  2. Click on the 'next page' button, triggering another API call.
  3. Click on the Cancel button - this should only interrupt the API call triggered by the Refresh button while allowing pagination to continue normally.

To explore possible implementations, I've set up a CodeSandbox with a minimal, clean starting point for building this functionality: https://codesandbox.io/p/github/Supernectar/ag-grid-infinite-refresh-cancel/main. I'm making use of the Rick and Morty API as a proof of concept because it doesn't require authorization and supports pagination, so tweaking the throttling options through devtools is recommended to simulate latency. It currently does not include anything related to the Cancel button, but it is ready to integrate any suggested approach.

We would like to know if ag-grid provides a formal way to achieve this behavior without needing to introduce extensive custom logic. Any guidance or best practices would be greatly appreciated!

Upvotes: 1

Views: 21

Answers (0)

Related Questions