Make parent route loader promises available to child route loaders

[mikefarquhar]

Currently the loaders all run in parallel and that's great as it's what we actually want most of the time, but it would be nice to be able to opt in to sequential loading. I'm thinking about the case when we want to grab pre-requisite data on a parent route that is then used to load the data for the various child routes, eg.

const router = createBrowserRouter([
  {
    path: '/a',
    element: <A />,
    loader: async () => {
      const aData = await getAData() // some resource we need to load child routes.
      return { aData };
    },
    children: [
      {
        path: '/b',
        element: <B />,
        loader: async ({ parentLoaderPromise }) => {
          const { aData } = await parentLoaderPromise;
          const { bData } = await getBData(aData);
          return { bData };
        }
      },
      // ... other routes that depend on aData.
    ],
  },
]);

By exposing the parent loader's promise, loaders maintain their parallel loading by default but allow users to opt-in to sequential loading by awaiting on it, granting access to it in the process.

I assume that under the hood React Router is grabbing all the loaders for the current route and running them in a Promise.all, in which case something along the lines of the following could potentially be viable?

function parentRouteLoader() {
  return Promise.resolve({ a: 1 });
}

async function childRouteLoader({ parentLoaderPromise }) {
  const { a } = await parentLoaderPromise;
  return { b: a * 2 };
}

const loaders = [parentRouteLoader, childRouteLoader];

const promises = [];
for (const loader of loaders) {
  promises.push(loader({ parentLoaderPromise: promises.at(-1) }));
}

const routeData = Promise.all(promises)
  .then((out) => {
    const data = out.reduce((data, loaderResponse) => {
      return { ...data, ...loaderResponse };
    }, {});
    return data;
  });

I can see that there are somewhat similar suggestions from a couple others here (I'm trying to keep this one as simple as possible), but this does appear to be a feature that would be useful to more than just myself.

[sergiodxa]

I think you could use the unstable_dataStrategy to customize this behavior, if you see the add logging example they run the Promise.all there.

let router = createBrowserRouter(routes, {
  unstable_dataStrategy({ request, matches }) {
    return Promise.all(
      matches.map(async (match) => {
        console.log(`Processing route ${match.route.id}`);
        // Don't override anything - just resolve route.lazy + call loader
        let result = await match.resolve();
        console.log(
          `Done processing route ${match.route.id}`
        );
        return result;
      })
    );
  },
});

So you can probably do something like this:

let router = createBrowserRouter(routes, {
  unstable_dataStrategy(async ({ request, matches }) {
    let data = {};
    for await (let match of matches) {
      let result = await match.resolve()
      data[match.route.id] = result;
    }
    return data;
  },
});

Note that I haven't tried it.