Ability to type useRouteLoaderData

[selbekk]

Right now useRouteLoaderData returns an unknown type. Understandably, it's probably impossible to provide the correct types directly, but could it support doing the same thing as useLoaderData does - namely accepting typeof someLoader as a generic argument?

import type { loader as rootLoader } from "~/root"

const SomeLeaf = () => {
  const rootData = useRouteLoaderData<typeof rootLoader>('root'); // typed!
}

[jeyj0]

It is possible to provide the correct types directly for RRv7 (at least in framework mode; I have no experience with non-fw-mode). I just finished a vite plugin to provide those types (90% of the code is copied from the awesome safe-routes package, previously known as remix-routes).

The feature requires type generation, but since RR now does that anyways, it should be really simple to hook into its functionality. My vite plugin already places the necessary file into the new .react-router/types directory.

Once I get around to it, I'll either try to implement it in RR directly, or at least publish the vite plugin somewhere...

The result:

const rootLoaderData = useRouteLoaderData("root");
//    ^ this has its type inferred correctly now

useRouteLoaderData("this_route_id_doesnt_exist");
//                 ^ this is a type error

[jeyj0]

I created a PR: #12535

(While creating the PR, I also realized that the vite plugin can't actually do the type error part of what I wrote above.)