Feedback wanted: React query or RTK Query with loaders using the new data strategy

[ChristophP]

Subscription management with loaders

Data loading and caching libraries such as RTK Query use a subscription based model to determine how long entries in the cache have to be kept around.

This typically works with hooks and a lot of discussions out there suggest using a component, but I felt that the whole point of the data APIs (since react router 6.4) is to get data loading matters out of the components tree.
Getting the loading for libs like RTK Query and react query out of the component tree properly thus far has been tough to do with react-router. Do do this with RTK Query one would have to subscribe to "start listening for data" and unsubscribe to "stop listening" when data is no longer needed.
React router offered no way to my knowledge to figure out when "a route no longer matches".

The following is my attempt to provide an API for this, using the the unstable_dataStrategy API shipped in react-router version 6.23.

Feedback welcome

Since I am looking to use this I would love to hear some opinions about how well you thin this would work.
Do you see any problems with it?
Do you have the same need to manage subscriptions for a data loading lib that was previously hard to achieve?
Is this solution in line with intented usage of the data strategy API?
Do you see an easier way to do this?

General idea

1. Determine when routes no longer match: Use the data strategy function to get access to matches. Keep around the previous matches to diff when a route that matched before no longer does.
2. Pass a function to the loaders which allows registering unload handlers: The data strategy API allows for passing extra argument to the loaders, so we use it to pass a onUnload(handler) function to the loader. It takes a function as an argument and when called that argument function will be registered to run when the route no longer matches.

Implementation

// data-strategy.ts
import type {
  unstable_DataStrategyMatch as DataStrategyMatch,
  unstable_DataStrategyFunction as DataStrategyFunction,
} from "react-router-dom";

type OnUnloadArg = () => void;
export type HandlerCtx = { onUnload: (fn: OnUnloadArg) => void };

export function createDataStrategy() {
  const unloaderEventTarget = new EventTarget();
  let previousMatches: string[] = [];

  // fire unload event for each unloading route
  const dispatchUnloadEvents = (matches: DataStrategyMatch[]) => {
    previousMatches.forEach((id) => {
      const match = matches.find((m) => m.route.id === id);
      // Dispatch unload event IF
      // - if the entry is not matched anymore or shouldLoad is true
      // - if the entry is still matched but shouldLoad is true, because the new loader will add this again
      if (!match || match.shouldLoad) {
        unloaderEventTarget.dispatchEvent(new CustomEvent(`unload-${id}`));
      }
    });
    // store matches for next run
    previousMatches = matches.map((match) => match.route.id);
  };

  // add second param to loaders which is a callback which get's called when the route is not a match anymore
  const dataStrategy: DataStrategyFunction = ({ matches }) => {
    dispatchUnloadEvents(matches);

    // Run loaders in parallel with the `context` value
    return Promise.all(
      matches.map((match) =>
        match.resolve(async (handler) => {
          // add unload handler and pass it to loader as argument
          const onUnload = (fn: () => void) => {
            unloaderEventTarget.addEventListener(`unload-${match.route.id}`, fn, { once: true });
          };
          // Whatever you pass to `handler` will be passed as the 2nd parameter
          // to your loader/action
          const result = await handler({ onUnload });
          return { type: "data", result };
        }),
      ),
    );
  };

  return { dataStrategy, dispatchUnloadEvents };
}

Usage

// router.ts
import { createBrowserRouter } from "react-router-dom";
import type { LoaderFunction } from "react-router-dom";

import { createDataStrategy, type HandlerCtx } from "./data-strategy";

const { dataStrategy, dispatchUnloadEvents } = createDataStrategy();

const router = createBrowserRouter(
  [
    {
          Component: AppLayout,
          loader: (_loaderArgs, handlerCtx) => {
            console.log("Intermediate loader sequence");
            const { onUnload } = handlerCtx as HandlerCtx;
            // add a subscription
            const timerId = setInterval(() => console.log("Subscribed", new Date()), 1000);
            // register unsubscribe function
            onUnload(() => {
              clearInterval(timerId);
              console.log("unloading here");
            });
            return null;
          }, 
     }
  ],
  { unstable_dataStrategy: dataStrategy }, // register data strategy here
);

// handle hot reloading
if (module.hot) {
  module.hot.dispose(() => {
    // dispatch events for all registered event handlers to make sure hot reloading doesn't keep any lingering subscriptions 
    // we pass an empty matches array so that all routes are "unloaded"
    dispatchUnloadEvents([]); 
    router.dispose();
  });
}

Loader Example for RTK Query

{
          Component: AppLayout,
          async loader: (_loaderArgs, handlerCtx) => {
            console.log("Intermediate loader sequence");
            const { onUnload } = handlerCtx as HandlerCtx;
            // add a RTK Query subscription
            const promiseResult = dispatch(api.endpoints.someEndpoint.initiate());
            // register unsubscribe function to be called when route doesn't match anymore
            onUnload(promiseResult.unsubscribe);
            const { status, data, error, refetch } = await promiseResult; 
            return data;
          }, 
     }

Related issues and discussions

• Loader Cleanup Function for Stateful Data #10200 (reply in thread)
• React Router 6 Loaders with RTK Query reduxjs/redux-toolkit#2751
• https://medium.com/@bitsol/using-react-tool-kit-rtk-query-with-react-router-v6-9eac07521bc5 (good example but offers no solution how to unsubscribe)

[FlorentHoareau]

Good to see that React Router is willing to provide a way to completely customize data fetching.
I think that the fact they are not providing any built-in event to catch unmatched routes in unstable_dataStrategy is actually a good thing, since it's intended to be a low-level api.

Maybe we can propose a few "standard" strategies, like the one you propose with the unloaders, or some single-fetch strategy (which seems to be the real reason why they're introducing this feature), but since it's still an unstable feature, I think it is reasonable to keep it as it is.

The only small hack that I do not like is the hot reload thing, but that is such an edge case that I do not have any better idea about how to solve it. I'd prefer having this handled directly by the library instead of relying on each developer, especially because it's a debug-time-only issue.

[ChristophP]

@FlorentHoareau thanks for the feedback.

I think that the fact they are not providing any built-in event to catch unmatched routes in unstable_dataStrategy is actually a good thing, since it's intended to be a low-level api.

yeah I like the API. It really gives a lot of flexibility to the users.

Maybe we can propose a few "standard" strategies, like the one you propose with the unloaders

yeah, hopefully in the future things like this will come out of the box. But until then, I think this will help managing subscriptions for things like RTK Query. So I will start using this until I find something better.