How to make loader params type safe?

[tykhan]

Assuming I have a router with dynamic parameter 'accountId', which I use in my loader to fetch data.

The question is, how to make params in my loader type safe automatically?

I can add a generic to LoaderFnContext, but it's not maintainable since route and loader won't know about changes in each other

[tannerlinsley]

Type your constraints into your overview loader. Then fulfill them when you call it.

[tykhan]

Is there any doc referring to that? Not sure If I got what you mean

[tykhan]

Not moving a loader logic to a separate function solves this issue, but it's not really convenient

[tannerlinsley]

Extracting the loader from the route creates a 3-phase type-dependency chain: path/search/etc => loader => components (which use loader). So while theoretically possible (we tried in prior versions) it explodes the complexity and sometimes even the TS compiler. That said, it's a pretty standard pattern in all TS that if you extract a function from an inference scope, you'll need to type its signature to contain it's required constraints and return value. That's all that's happening here:

const Route = createRoute({
  ...
  loader: ({ params }) => fetchPostById(params.postId)
})

function fetchPostById(postId: string): Post {
  ...
}