Cancel fetch in react admin

Viewed 14

We are using React-Admin v4, and some of our APIs are quite slow. We're using the search input field, and our problem is that api requests can overlap. If there is an existing fetch in progress, typing again doesn't cancel the existing fetch. It fires another one, and the results list is updated when each request returns, leading to confusing UI.

Can we configure the search field to cancel existing fetches when a new one is triggered?

1 Answers

React-admin doesn't implement Query Cancellation, although its underlying data fetching library, react-query, does allow it (see https://react-query-v3.tanstack.com/guides/query-cancellation for details).

So if you want to implement query cancellation in a react-admin filter, you'll have to build your own component based on react-query's useQuery hook, and populate a ListContext with the results. Check the Building a List View By Hand tutorial for guidance.

Related