Access parent loader data?

[blitzbohne]

Hello,

If we for example have a root-route with its own loader we can await it in the child routes by awaiting parentMatchPromise.
However the question is how can we access the actual loaded data from the root/parent route within the child route's loader? The parentMatchPromise returns void.

Alex

[schiller-manuel]

you can use the useParentMatches hook which will let you access parent loader data.

https://tanstack.com/router/v1/docs/framework/react/api/router/useParentMatchesHook

[ViewableGravy]

Originally reading this answer, I was a bit confused since it doesn't directly answer the question of how to access the parents loader data in the childs loader function, however, it did trigger an idea of how you would use this to get the same behaviour. If you return the promise from the loader. Wherever you are rendering the outlet, you can use the Awaited component to render a loader (or whatever you would be rendering in the routes loader0. ie.

function Component() {
  const { deferredPromise } = route.useLoaderData()

  return (
    <Await promise={deferredPromise} fallback={<Loader />>
      {(data) => <Outlet />}
    </Await>
  )
}

This may not exactly handle your use case however but this covered my use case

[schiller-manuel]

indeed I misread the original question.
I fixed this so now parentMatchPromise will yield the actual match which carries the loader data