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]

seems to be a stackblitz problem maybe? locally in VS code I see the correct types:

[Andrewy-gh]

Tried locally too. Working now thanks.

[BrendanC23]

@schiller-manuel Can you take another look at this question?

Here's a StackBlitz that demonstrates the issue. I'm trying to pass part of the loader data down to a child component, but cannot determine the type of the child's props.

export const Route = createFileRoute('/about')({
  loader: () => {
    const data = { data: 1, childData: 2 };

    return data;
  },
  component: AboutComponent,
});

const route = getRouteApi('/about');

function AboutComponent() {
  const loaderData = route.useLoaderData();

  return (
      <AboutChild childData={loaderData.childData} />
  );
}

type RouteDataType = ReturnType<(typeof route)['useLoaderData']>; // any
type ChildDataType = RouteDataType['childData']; // This should be number, but is any

type ChildProps = {
  childData: ChildDataType; // How do I determine this type?
};

function AboutChild({ childData }: ChildProps) {
  return (
    <h4>{childData}</h4>
  );
}

[schiller-manuel]

you can try to get the type of the loader data for a route like this:

type LoaderData = RouteById<RegisteredRouter['routeTree'], '/about'>['types']['loaderData']

just be aware this uses internal types that might change.