Typesafe route IDs for useRouteLoaderData?

[WesleyYue]

I just had a small refactor that moved/renamed some files and realized that a few useRouteLoaderData calls broke because the route ID was changed, but there were no errors anywhere at run time. Is there a way to make these route IDs type safe in the first place?

[sergiodxa]

You can use a script to generate a type with the list of route IDs, check https://sergiodxa.com/tutorials/strongly-type-remix-route-ids.

[jeyj0]

I went ahead and used that idea, plus the one below from @harrygr and a bit of my own, to create a PR for RRv7. Since RRv7 uses type generation already, there's now a natural place to do that directly! See remix-run/react-router#12535

[harrygr]

You can go one step further and get the type of the route's loader. What you want is a type like this:

export type LoaderType<P> = P extends {loader: Function} ? P['loader'] : never

export type RouteLoaders = {
  "root": LoaderType<typeof import("~/root")>;
  "routes/_app": LoaderType<typeof import("~/routes/_app")>;
  // etc
};

You can then define a wrapper for useRouteLoaderData that adds the types:

export function useTypedRouteLoaderData<ID extends keyof RouteLoaders>(
  route: ID
) {
  return useRouteLoaderData(route) as SerializeFrom<RouteLoaders[ID]>;
}

If the route does not contain a loader then useTypedRouteLoaderData return type will be never for that route ID. Otherwise it should be the return type of the loader.

You can build a script to generate the RouteLoaders type from your routes. Something like:

import fs from "fs";
import path from "path";
import { readConfig } from "@remix-run/dev/dist/config";

(async () => {
  const routes = (await readConfig(".")).routes;

  const loaderType = Object.entries(routes)
    .map(([, route]) => route.id)
    .reduce(
      (def, id) => `${def}\n  "${id}": LoaderType<typeof import("~/${id}")>;`,
      "export type RouteLoaders = {"
    )
    .concat("\n};");

  const template = `export type LoaderType<P> = P extends {loader: Function} ? P['loader'] : never

${loaderType}
`;

  fs.writeFileSync(path.join("app/generated/routeTypes.ts"), template, {
    encoding: "utf-8",
    flag: "w",
  });
})();

This gives pretty nice type-safety.

Of course, where it falls short is that what useRouteLoaderData returns depends on which route modules are being rendered as part of the current path. E.g. if you call useRouteLoaderData('routes/foo.bar') from a route module at routes/tak.lah then it'll return undefined. Only loader data for routes that are currently being rendered are available.

It would be interesting to see if it's possible to have a dynamic useRouteLoaderData whose return type differs depending on where it's called. It sounds tricky though.