beforeLoad not loading before the loader

[rhuanbarreto]

Don't think that's a bug yet, but rather a quirk that may be a bug.

I'm using beforeLoad to authenticate/verify the user before loading the page. I added this on a /_layout route right after the root route so all pages under /_layout are authenticated.

Then I expose the data loaded from loaderData to the page loader so I can use it on the UI by forwarding the context outputs to the loader output so I don't need to load it again.

export const Route = createFileRoute({
  component: MainLayout,
  beforeLoad: async () => {
    const loaderData = await rootLoader();
    checkDomainAccess(loaderData.pca, loaderData.publicInfo.allowedDomains);
    return loaderData;
  },
  loader: ({ context: { pca, publicInfo } }) => ({ pca, publicInfo }),
  staleTime: Infinity,
});

For understanding, rootLoader calls an API to fetch some configurations and executes the authentication chain.

Then I use it on the layout component:

const { useLoaderData, useNavigate } = getRouteApi("/_layout");

export default function MainLayout() {
  const navigate = useNavigate();
  const { pca, publicInfo } = useLoaderData();
  ...
}

The problem is that sometimes the loader data (in this case publicInfo) comes as undefined, which is weird once beforeLoad should run before loader.

Am I missing something here?

[schiller-manuel]

can you please provide a complete minimal reproducer by forking one of the existing router stackblitz examples?

[rhuanbarreto]

I found the error. My mistake. If I use beforeLoad to expose some data, I should use useRouteContext instead of forwarding useLoaderDate.

the right code would be:

Route

export const Route = createFileRoute({
  component: MainLayout,
  beforeLoad: async () => {
    const loaderData = await rootLoader();
    checkDomainAccess(loaderData.pca, loaderData.publicInfo.allowedDomains);
    return loaderData;
  },
});

Component

const { useRouteContext, useNavigate } = getRouteApi("/_layout");

export default function MainLayout() {
  const navigate = useNavigate();
  const { pca, publicInfo } = useRouteContext();
  ...
}