Typing definition for loader and action hooks

[soullivaneuh]

Summary

Currently, hooks related to data fetching and mutation like useLoaderData and useActionData does not provide any possibility to proper define the typing of their return values.

This subject was already discussed multiple times with proposed solutions (see references below) since 2022 but nothing out as far as I'm writing this thread.

So I would like to start a new discussion to get a status it.

Closed proposition

A Pull Request was already proposed to implement such a thing (#9670) but was closed with the argument of waiting about typing reconsideration with Remix v3: #9670 (comment)

However, I don't see any development trace neither road-map about this version 3 of Remix neither any discussion about the related typing subject. May you give us some links?

Similar already existing implementations

Similar implementations for type inference already exists on some of the proposed hooks:

react-router/packages/react-router/lib/hooks.tsx

Lines 293 to 295 in 241f2d4

	export function useParams<
	ParamsOrKey extends string | Record<string, string | undefined> = string
	>(): Readonly<

react-router/packages/react-router/lib/hooks.tsx

Lines 131 to 134 in 241f2d4

	export function useMatch<
	ParamKey extends ParamParseKey<Path>,
	Path extends string
	>(pattern: PathPattern<Path> | Path): PathMatch<ParamKey> | null {

Why not proposing something equivalent?

Existing solution trough external library

@fredericoo created a library to provide type safety with the mentioned hook: https://github.com/fredericoo/react-router-typesafe

This manner looks to be quite reliable. Is considering the implementation of such a solution under your official namespace a possibility? If not, why?

Many thanks.

References

• How to write the correct type for `useLoaderData()`? (Typescript) #9792
• Loader data generics #9854
• feat(react-router): add type safety to useActionData & useLoaderData hooks #9670
• feat(router): add type safety to json & redirect functions #9669

[kiliman]

Remix as of v2.9 with future: { unstable_singleFetch: true } (currently in pre-release) will allow you to return native objects from your loaders and actions. Unlike the current version, which converts the payload to JSON, so Date becomes string, single-fetch will encode the data to be converted to its native format in the client. To handle this, make sure to return the naked object instead of using the json helper.

The current hook, useLoaderData<typeof loader>(), still assumes that the data is in JSON format; however, the data is actually converted correctly. Therein likes the problem with type generics or casting via as. You are basically telling TypeScript "I know what the type should be".

To workaround this issue, you can create a simple wrapper function:

export function useTypedLoaderData<T extends LoaderFunction>() {
  return useLoaderData() as Awaited<ReturnType<T>>;
}

export function loader() {
  return { message: 'hello, world', now: new Date() }
}
export default function Component() {
  const data = useTypedLoaderData<typeof loader>()
      //^? const data: { message: string; now: Date; }
  console.log(data.now.toLocaleDateString())
}

All this to say is that now that Remix supports returning naked objects with the correct native types, this means that Remix and React Router will have feature parity, since a React Router loader can simply return a naked object that is returned via the useLoaderData() hook, without requiring a JSON-to-Native conversion. You can create the same useTypedLoaderData hook above, and it will now work the same as Remix and give you the type safety you're asking for.

Anyway, I think this is what they mean by waiting for Remix v3.

From the looks of things, it seems that React Router v7 may pretty much merge in Remix directly as a single library (instead of separate Remix v3) that can span from SPA to SSR and everything in between.

[soullivaneuh]

Remix as of v2.9 with future: { unstable_singleFetch: true } (currently in pre-release) will allow you to return native objects from your loaders and actions. Unlike the current version, which converts the payload to JSON, so Date becomes string, single-fetch will encode the data to be converted to its native format in the client. To handle this, make sure to return the naked object instead of using the json helper.

I did some search about this option but didn't find any official documentation. May you have some like to share?

Also, by looking at the related found discussions on remix (not react-router), I didn't see the relation with the typescript problematic I am exposing. Would you like to clarify?

The current hook, useLoaderData(), still assumes that the data is in JSON format; however, the data is actually converted correctly. Therein likes the problem with type generics or casting via as. You are basically telling TypeScript "I know what the type should be".

To workaround this issue, you can create a simple wrapper function

We can indeed does such workarounds or even simply use the library made by @fredericoo: https://github.com/fredericoo/react-router-typesafe

But this is exactly the subject of the discussion I created: Why not proposing that king of generic typing directly under react-router? It would avoid repetitive workaround definition or extra library installation for each of our projects using react-router.

Anyway, I think this is what they mean by waiting for Remix v3.

From the looks of things, it seems that React Router v7 may pretty much merge in Remix directly as a single library (instead of separate Remix v3) that can span from SPA to SSR and everything in between.

This is also a problematic I reveal on this discussion. I don't see any development trace neither road-map about this version 3 of Remix or version 7 of react-router neither any discussion about the related typing subject.

If you have any official information to share about that, I would be grateful! :)

[kiliman]

I did some search about this option but didn't find any official documentation. May you have some like to share?

Also, by looking at the related found discussions on remix (not react-router), I didn't see the relation with the typescript problematic I am exposing. Would you like to clarify?

The pre-release guides... should be any day now for official v2.9 version

https://github.com/remix-run/remix/blob/release-next/docs/guides/single-fetch.md#streaming-data-format

But this is exactly the subject of the discussion I created: Why not proposing that king of generic typing directly under react-router? It would avoid repetitive workaround definition or extra library installation for each of our projects using react-router.

I think now that they will return native objects so the loader return type matches the useLoaderData type, they may consider adding the type generics.

This is also a problematic I reveal on this discussion. I don't see any development trace neither road-map about this version 3 of Remix or version 7 of react-router neither any discussion about the related typing subject.

I would be grateful if you have any official information to share about that! :)

This PR just merged into the React Router v7 branch. Ryan also tweeted about it.

• V7 rename #11403
• https://twitter.com/ryanflorence/status/1767560952646607270

Basically, you'll find most of this if you follow the GitHub notifications for both repos.

[soullivaneuh]

The pre-release guides... should be any day now for official v2.9 version

https://github.com/remix-run/remix/blob/release-next/docs/guides/single-fetch.md#streaming-data-format

Thanks for the link. Still, this is talking about remix stream response format change. What is the relation with the Typescript problematic here? 🤔

I think now that they will return native objects so the loader return type matches the useLoaderData type, they may consider adding the type generics.

Currently, it does not matches anything, the hooks return unknown by definition:

react-router/packages/react-router/lib/hooks.tsx

Line 928 in 241f2d4

export function useLoaderData(): unknown {

react-router/packages/react-router/lib/hooks.tsx

Line 928 in 241f2d4

export function useLoaderData(): unknown {

What we are looking for is the possibility to define the typing as you proposed with your workaround or the patch library I referenced before.

This PR just merged into the React Router v7 branch.

Nice catch! However, it looks like the problem is still present on the v7 branch. The signature are the same:

react-router/packages/react-router/lib/hooks.tsx

Line 928 in c7dd3d3

export function useLoaderData(): unknown {

react-router/packages/react-router/lib/hooks.tsx

Line 952 in c7dd3d3

export function useActionData(): unknown {

A contribution was made and refused because of "the wait of the next major refactor", and it exactly solves the problematic I am exposing: https://github.com/remix-run/react-router/pull/9670/files#diff-0084431f6040dd28c2c3948d556762903dcdeb348b9bb28c8fbe01524c9070a3

I'm afraid this problematic will be forgotten over time. I may work on a new proposition, but I would like to be sure it would be considered before starting anything.