T
TanStack•7mo ago
like-gold

Beginner: wrong beforeload being trigger ?

Hey guys, so I have a file tree as follow: 
|-(teams)
| |-teams.tsx
| |-teams_.$teamId.tsx
| |-teams_.$teamId_.settings.tsx
| |-teams_.$teamId_.invitations_.$token.accept.tsx
|-(teams)
| |-teams.tsx
| |-teams_.$teamId.tsx
| |-teams_.$teamId_.settings.tsx
| |-teams_.$teamId_.invitations_.$token.accept.tsx
and whenever I access the page teams_.$teamId_.invitations_.$token.accept.tsx the beforeload of teams_.$teamId.tsx is being called. Is this normal ? if so how could I truned this off. I tried to look in the docs for this but I couldn't find anything. Thanks in advanced 🙌
16 Replies
rare-sapphire
rare-sapphire•7mo ago
all beforeLoad functions of all routes that are in the current hierachy are executed upon each navigation you cannot turn this off what does it do in your case? there are several options depending on the use case
like-gold
like-goldOP•7mo ago
Thanks for getting in touch. I am just using the beforeLoad to check if my user is allowed to view page. But because the beforeLoad of the/teams/:id page will get called first, the beforeLoad of the /teams/:id/invitations/:token page will never be called. /teams/:id 
export const Route = createFileRoute("/(teams)/teams_/$teamId")({
  beforeLoad: async ({ context }) => {
    permissions.team.view(context.user);
  },
});
export const Route = createFileRoute("/(teams)/teams_/$teamId")({
  beforeLoad: async ({ context }) => {
    permissions.team.view(context.user);
  },
});
/teams/:id/invitations/:token 
export const Route = createFileRoute(
  "/(teams)/teams_/$teamId_/invitations_/$token/accept",
)({
  beforeLoad: ({ context, params }) => {
    permissions.team.acceptInvite(context.user, Route.fullPath);
  },
});
export const Route = createFileRoute(
  "/(teams)/teams_/$teamId_/invitations_/$token/accept",
)({
  beforeLoad: ({ context, params }) => {
    permissions.team.acceptInvite(context.user, Route.fullPath);
  },
});
rare-sapphire
rare-sapphire•7mo ago
sounds like your accept route should not be under the permission check then? so move it out of there
like-gold
like-goldOP•7mo ago
so you want me to move it out of the /(teams)/teams_/$teamId directory ?
rare-sapphire
rare-sapphire•7mo ago
its parent must be something that does not check the permission there are other workarounds
like-gold
like-goldOP•7mo ago
ok I see, but in this case all of the teams routes got a auth check.
rare-sapphire
rare-sapphire•7mo ago
you could also disable the auth check if the accept is currently matched
rare-sapphire
rare-sapphire•7mo ago
rare-sapphire
rare-sapphire•7mo ago
export const Route = createFileRoute('/foo')({
  beforeLoad: (opts) => {
    if (opts.matches.find((m) => m.routeId === '/foo/hello')) {
      return;
    } else {
      // check auth
    }
  },
});
export const Route = createFileRoute('/foo')({
  beforeLoad: (opts) => {
    if (opts.matches.find((m) => m.routeId === '/foo/hello')) {
      return;
    } else {
      // check auth
    }
  },
});
like-gold
like-goldOP•7mo ago
Awesome, that makes a lot of sense Thanks for explaining @Manuel Schiller 🙌
rare-sapphire
rare-sapphire•7mo ago
there are more options for sure you could also put the auth check into a pathless route
like-gold
like-goldOP•7mo ago
Yes Indeed, I will play around with the code to see which one fit better
rare-sapphire
rare-sapphire•7mo ago
like-gold
like-goldOP•7mo ago
very handy thanks
rare-sapphire
rare-sapphire•7mo ago
IMO the pathless route is cleaner but both work
like-gold
like-goldOP•7mo ago
yes I agree

Did you find this page helpful?