useLoaderData in export handle

[nabilsarder]

Trying to create breadcrumbs that can handle dynamic routes. I am able to use useParams() in the export handle but useLoaderData() returns undefined.

export const handle = {
  breadcrumb: () => {
    const params = useParams() // returns valid response
    const data = useLoaderData() // returns undefined

    return <BreadcrumbLink urlPath={`/path/to/${params.id}`} label={data.label || ''} />
  }
}

Any ideas if this can be done?

[sergiodxa]

How are you calling breadcrumb? Also where you call breadcrumb will affect what loader data do you get.

If you define that function in the route routes/parent/child.tsx and you call it in routes/parent.tsx the loader data should be the one on routes/parent.tsx since that's where the "component" breadcrumb is rendered.

[piotrkulpinski]

@sergiodxa Any idea how to infer the type from the loader function in the same file as handle?

I tried something like this but it doesn't work:

export const handle = {
  Breadcrumb: ({ alternative }: Awaited<ReturnType<typeof loader>>) => (
    <BreadcrumbsLink to={`/alternatives/${alternative.slug}`} label={alternative.name} />
  ),
}

export const loader = async ({ params: { slug } }: LoaderFunctionArgs) => {
  const alternative = await prisma.alternative.findUniqueOrThrow({
    where: { slug },
  })

  return json({ alternative })
}

[piotrkulpinski]

Something like this works, but I'm sure there's a better way:

export const handle = {
  Breadcrumb: ({ alternative }: Awaited<ReturnType<Awaited<ReturnType<typeof loader>>["json"]>>) => (
    <BreadcrumbsLink to={`/alternatives/${alternative.slug}`} label={alternative.name} />
  ),
}

[nartc]

@piotrkulpinski late here but while useLoaderData doesn't work, useRouteLoaderData('path_to_route_exposes_loader')

[ilikebuttons]

@nartc This worked for me, but now I'm getting this error in the console:
Warning: Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. You can only call Hooks at the top level of your React function.

[nikolailehbrink]

What you can do if you need the loader data of the root in breadcrumb you could pass it yourself.

let matches = useMatches()
let ui = matches
  .filter(match => match.handle?.Breadcrumb)
  .map(match => <match.handle.Breadcrumb {...match.data} />)

The match.data is the loader data of the match, so you can pass it that way to your breadcrumb component. Then render in your handle export you can receive it

export const handle = {
  Breadcrumb(data: LoaderData) => {
    let params = useParams() // returns valid response
    return <BreadcrumbLink urlPath={`/path/to/${params.id}`} label={data.label || ''} />
  }
}

How do you efficiently get the types from "useLoaderData" here @sergiodxa. I am stuck at the same place as @piotrkulpinski.

I tried the following but I get a type error:

type LoaderData = Awaited<ReturnType<typeof loader>>;
export const handle = {
  breadcrumb: ({ id }: LoaderData) => {
    return { path: `/sales/orders/${id}`, label: `Order #${id}` };
  },
};

How did you type the LoaderData in your example?