TanStackT
TanStack•2y ago•
46 replies
skinny-azure

Routing with async data

Consider the following setup where my context has user: User | null:
// app.tsx

const {data: user} = useUser();

...

<RouterProvider router={router} context={{user}}/>


Note that useUser is a react query. On direct navigation to this page I want to check this users permissions list, and redirect them if they don't have it

// protected-page.tsx with route /_authenticated/_sidebarLayout/protected-page/
...
beforeLoad: ({context}) => {
if (!context.user?.permissions.contains(x))
  {
   redirect
  }
}


How can I achieve this, as user is initially null until the data loads from the query - redirecting them every time? Would I have to add some kind of loading into the context and catch that at a higher level perhaps for all pages this might affect?
Was this page helpful?