#Beginner: wrong beforeload being trigger ?

23 messages · Page 1 of 1 (latest)

twilit mesa
#

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

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 🙌

safe bluff
#

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

twilit mesa
#

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);
  },
});

/teams/:id/invitations/:token

export const Route = createFileRoute(
  "/(teams)/teams_/$teamId_/invitations_/$token/accept",
)({
  beforeLoad: ({ context, params }) => {
    permissions.team.acceptInvite(context.user, Route.fullPath);
  },
});
safe bluff
#

sounds like your accept route should not be under the permission check then?

#

so move it out of there

twilit mesa
#

so you want me to move it out of the /(teams)/teams_/$teamId directory ?

safe bluff
#

its parent must be something that does not check the permission

#

there are other workarounds

twilit mesa
#

ok I see, but in this case all of the teams routes got a auth check.

safe bluff
#

you could also disable the auth check if the accept is currently matched

# 
export const Route = createFileRoute('/foo')({
  beforeLoad: (opts) => {
    if (opts.matches.find((m) => m.routeId === '/foo/hello')) {
      return;
    } else {
      // check auth
    }
  },
});
twilit mesa
#

Awesome, that makes a lot of sense

#

Thanks for explaining @safe bluff 🙌

safe bluff
#

there are more options for sure

#

you could also put the auth check into a pathless route

twilit mesa
#

Yes Indeed, I will play around with the code to see which one fit better

safe bluff
twilit mesa
#

very handy thanks

safe bluff
#

IMO the pathless route is cleaner

#

but both work