Infer type from loader to use in components/hooks etc

[JasonColeyNZ]

Is there a way to get the type inference from a part of the data returned from the loader?

I have a loader returning something like...

return data({service, category}, {headers: {myHeaders})

Then in a component I am trying to extract the type using something like...

type LoaderData = Awaited<ReturnType<typeof loader>>
type ServiceType = LoaderData['service']

But typescript warns that

Property 'service' does not exist on type 'DataWithResponseInit<{ service: {...}, category: {...}>'

So what is the preferred way to get this type using Remix loaders/actions Version 2.12.0?

Cheers for any help.
Jason

[sergiodxa]

useLoaderData<typeof loader>()

[JasonColeyNZ]

that will allow me to get the data, that is fine, but is what I am wanting is to get the TYPE for the data, to be used in hooks, functions etc.

As you can see in the example I want the type for the service from the data returned by the loader

[GabenGar]

type LoaderData = ReturnType<typeof useLoaderData<typeof loader>>

Probably

[sergiodxa]

You can use SerializeFrom<typeof loader>

[JasonColeyNZ]

Perfect @sergiodxa another little Remix gem I learnt today