Make useRouteLoaderData accept a generic

[Klukies]

Just like useLoaderData can be used as such useLoaderData<typeof loader>(),
I believe it would make sense that the new useRouteLoaderData can also be used in this way.

[kiliman]

I agree. That's how useTypedRouteLoaderData works in remix-typedjson.

import { loader as rootLoader } from '~/root'

const rootData = useTypedRouteLoaderData<typeof rootLoader>('root')

https://github.com/kiliman/remix-typedjson#usetypedrouteloaderdata

[CapitaineToinon]

The problem is that useRouteLoaderData is just an export from react router and that it returns unknown:

/**
 * Returns the loaderData for the given routeId
 */
export function useRouteLoaderData(routeId: string): unknown {
  let state = useDataRouterState(DataRouterStateHook.UseRouteLoaderData);
  return state.loaderData[routeId];
}

https://github.com/remix-run/react-router/blob/0e4c524b329bf9641ccfc85da95bcde708bc56ca/packages/react-router/lib/hooks.tsx#L771

So you'll never have a nicely type safe hook you can get data with. Of course you can just cast it with the as keyword but doing so just forces typescript to pretend it is something when in reality you have no idea.

You can cast it using the as keywork, as such

import { type SerializeFrom } from '@remix-run/node'
import { useRouteLoaderData } from '@remix-run/react'
import type { loader } from '~/routes/me'

export default function Page() {
	const user = useRouteLoaderData('routes/me') as SerializeFrom<typeof loader>

	return (
		<>
			<h1>Welcome, {user.name}</h1>
		</>
	)
}

And if you really want to, you could make a wrapper function accepting a generic.

function useTypedRouteLoaderData<T>(route: string) {
	return useRouteLoaderData(route) as SerializeFrom<T> | underfined
}

In that regard, I much prefer how frameworks like sveltekit handle this. Wonder if something similar could be possible with remix. Maybe have some types being generated by remix on the fly.

[sergiodxa]

That’s also how useLoaderData works, it cast the value to your generic.

I think doing it in useRouteLoaderData shouldn’t be an issue as long as you pass typeof loader.

[CapitaineToinon]

Yes I'm aware. Maybe I've just been spoiled by sveltekit having relative imports to ./$types to solve that problem for us. Would love to have a similar feature in Remix !

[john-griffin]

This would be super helpful!

[CapitaineToinon]

So I ended up making my own useTypedRouteLoaderData with a limited set of options that I have to explicitly define. That way I won't accidently mess up the types when importing the data. Of course, it still doesn't prevent you from runtime errors if you use the hook inside a route that currently rendered (I think we would need generated types for that) but it's better than nothing imo.

import { useRouteLoaderData } from '@remix-run/react'
import type { SerializeFrom } from '@remix-run/node'
import type { loader as RouteAuthLoader } from '~/routes/auth'
import type { loader as RouteMeLoader } from '~/routes/me'

type Loaders = {
	'routes/auth': typeof RouteAuthLoader
	'routes/me': typeof RouteMeLoader
}

export function useTypedRouteLoaderData<T extends keyof Loaders>(route: T) {
	return useRouteLoaderData(route) as SerializeFrom<Loaders[T]>
}