TanStackT
TanStack•2mo ago•
3 replies
skinny-azure

`useLoaderData` returns union of parent and child loader types

When a parent route has children with loaders, getRouteApi('/parent').useLoaderData() returns a union of all loader types instead of just the parent's. Same applies for useSearch and useParams in similar situations. Tanstack Router Version 1.39 and latest

Reproduction


import { createRoute, createRootRoute, getRouteApi } from '@tanstack/react-router';

const rootRoute = createRootRoute({});

const parentRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: 'parent',
  loader: async () => ({ parentData: 'hello' }),
});

const childRoute = createRoute({
  getParentRoute: () => parentRoute,
  path: 'child',
  loader: async () => ({ childData: 123 }),
});

const routeTree = rootRoute.addChildren([
  parentRoute.addChildren([childRoute]),
]);

const parentApi = getRouteApi('/parent');
const data = parentApi.useLoaderData();

data.parentData;
// ❌ Error: Property 'parentData' does not exist on type '{ parentData: string; } | { childData: number; }'


Expected


const data = parentApi.useLoaderData();
// Type: { parentData: string }


Actual


const data = parentApi.useLoaderData();
// Type: { parentData: string } | { childData: number }
Was this page helpful?