How to get type of loader data

[BrendanC23]

I have a component like this:

function Parent() {
    const route = getRouteApi("/");
    const loaderData = route.useLoaderData();

    return (<Child data={loaderData} />);
}

type ChildProps = {
    data: SomeType; // What type is this?
};

function Child({ data }: ChildProps) {
    return null;
}

How can I get the type of route.useLoaderData()? I've tried ReturnType<RouteApi<"/">["useLoaderData"]>, but this gives unknown.

I found this similar discussion, but it doesn't have a solution.

[chuckjrussell]

I'm also encountering this issue @BrendanC23 did you ever find a solution to this? Temporarily I've added const data = Route.useLoaderData() as MyDataType but its obviously a pretty poor solution to the problem.

[schiller-manuel]

can you please show a complete example where you need the type?

[chuckjrussell]

@schiller-manuel Thanks for reaching out! Below is an example set of code. I'm still new to tan stack so open to the idea I might be doing this wrong:

import { getStory } from "@/lib/storyUtils";
import { createFileRoute, Link } from "@tanstack/react-router";

export const Route = createFileRoute("/story/$storyId")({
  component: Story,
  loader: ({ params }) => getStory(params.storyId),
});

function Story() {
  const data = Route.useLoaderData();

  return (
    <div className="p-2">
      <p>{data}</p> //TS Error: Type '{}' is not assignable to type 'ReactNode'.
    </div>
  );
}

The data type coming from Route.useLoaderData() is just {} so I can't accurately make any reference to that data.

I can, as mentioned, cast the data type, so something like const data = Route.useLoaderData() as Story but that kind of defeats the purpose of it being strongly typed.

Assuming I'm using the loader right (which of course could very easily be wrong!) what would be good is if Route.useLoaderData was typed based on the infered type of the loader property passed in during createFileRoute

[schiller-manuel]

Assuming I'm using the loader right (which of course could very easily be wrong!) what would be good is if Route.useLoaderData was typed based on the infered type of the loader property passed in during createFileRoute

It is usually inferred like that. if it is not, then there is an error somewhere else.
can you please create a minimal complete example?