CU - Add global AbortController for API requests

[alexandec]

Proposed Change

Our current AbortController implementation is piecemeal, meaning certain back button presses cancel certain API requests. We'd like to make this universal and automatic, where each API request creates its own AbortController. Any back button press in the app would then abort all API requests currently in flight.

Implementation idea (global state approach)

• Global state would contain a list of AbortControllers
• The api.ts call() function would push an AbortController onto the list for each request
• A useBeforeNavBackListener listens for back button presses
• On back button press, the back button listener would call the abort() method on each of the AbortControllers in the list and remove them from the list
• Need a way to remove the correct AbortController from the list when the request completes without aborting

Alternate implementation idea (screen transition approach)

• Similar to the above approach, but whenever the user changes screens, the abort() method is called on each of the AbortControllers in the list
• Possible issue with this approach: if one screen sends a request to preload data for another screen, the preload request could get canceled on screen change

Why Should We Prioritize?

• UX is improved because when a user cancels an action, the action is canceled on the BE instead of continuing to completion
• Engineer time is reduced because AbortControllers don't have to be re-implemented for each screen and API request
• Compute time and bandwidth are saved because requests are cancelled when the results won't be shown to the user

Coding Time Estimation

3

Testing Considerations

• This is a global change affecting all API requests in the app, so all features should be checked.
• In particular, screens that initiate API requests should be checked, including behavior when the back button is pressed.
• Another area to check is screens that update information. If the user hits the back button before the update request completes, check that the request is canceled.

Checklist

• [X] Add the front-end label tag
• [X] Attach to the Frontend epic for engineering initiatives

[timwright12]

@alexandec is this still a valid issue since we've mostly moved over to ReactQuery?

[alexandec]

@timwright12 yes, it's still an issue. React Query doesn't abort queries by default. It does provide a method for doing so, which we could use: https://tanstack.com/query/v4/docs/framework/react/guides/query-cancellation. One note: since React Query caches query results, sometimes it's still useful to complete the query and cache the results for later, even if the user has changed screens and won't see the results immediately. So we should be judicious in deciding which queries to abort.