Cancel or abort running requests while navigating away from pages with pending data loaders

[oddcelot]

I was building some test scenarios and also one for long loading times with either a timeout or delayed response using MSW and maybe cam across something that does not sit with me well (this may be very well a skill issue 😅): Changing routes always waits on the Promise on the depending loader function to resolve/reject – even if a navigation event happens that would make fulfilling the Promise unnecessary.

I was wondering if aborting request could be done somehow implicitly by the router. So far I played around with AbortController and makeAbortable, but I'm a bit undecided on how and where exactly this could be managed. Would appreciate some thoughts on this (and whether or not it makes sense) 🤗

This feels related to #375

Here is a minimal outline of the paths/setup:

Setup

// Routes

export const routes: RouteDefinition[] = [
  {
    path: "/",
    component: HomePage,
    load: loadHomeData,
  },
  {
    path: "/about",
    component: AboutPage,
    load: loadAboutData,
  },
  {
    path: "/post/:id",
    component: PostPage,
    load: loadPostData,
  },
];

// Route page (e.g. PostPage.tsx)

export default function Page(props: RouteSectionProps) {
  const params = useParams();
  const routeData = createAsync(() => getRouteData(params.id));
  
  return (
    <section>
      <h1>Page Title</h1>
      <Suspense fallback="waiting for routeData…">
        <pre>{JSON.stringify(routeData(), undefined, 2)}</pre>
      </Suspense>
    </section>
  );

// Route data (e.g. PostPage.data.tsx)

export const fetcher = (id: string) =>
  fetch(`https://api.example.com/data/${id}`);

export const getRouteData = cache(async (id: string) => fetcher(id), "data")

export const loadRouteData: RouteLoadFunc<void> = ({ params }) => {
  void getRouteData(params.id);
};

Navigating patterns

Note

For the scenario we assume very long loading times for illustrative purpose (> 4s)

Happy path

Begin on / (HomePage)

1. load data via load function loadHomeData (intent: initial)
2. hover over link to /post/a and load data via loadPostData (intent: preload)
3. loading of data for /post/a is done and cached
4. click and navigate to /post/a (PostPage)
5. no additional data is being fetched, since this hits cache
6. all requests are settled and successful

Aborting unneeded requests

Begin on / (HomePage)

1. load data via load function loadHomeData (intent: initial)
2. hover over link to /post/a and load data via loadPostData (intent: preload)
3. hover over link to /post/b and load data via loadPostData (intent: preload)
4. click and navigate to /post/a (PostPage)
   • load of data for /post/b is aborted
   • loading of data for /post/a is still pending
5. show <Suspense> for relevant blocks and wait for data to settle
6. all requests are settled and successful - or aborted

Navigating away from unresolved loading within the same route

Begin on / (HomePage)

1. load data via load function loadHomeData (intent: initial)
2. hover over link to /post/a and load data via loadPostData (intent: preload)
3. click and navigate to /post/a (PostPage)
4. show <Suspense> for relevant blocks and wait for data to settle
5. hover over link to /post/b and load data via loadPostData (intent: preload)
6. click and navigate to /post/b (PostPage)
   • load of data for /post/b is still pending
   • transition state is engaged
7. navigate to / (HomePage) and load data via load function loadHomeData (intent: navigate)

Caution

Currently navigation to / is done after the Promise form the loaded has been resolved/rejected. Ideally this would exit early, when navigating away.

8. show HomePage