S
SolidJS•2y ago
Martnart

Make routeData blocking

Following scenario: 
(app).tsx
(app)/
  route.tsx
(app).tsx
(app)/
  route.tsx
(app).tsx 
export const routeData = () => {
  return createServerData$(async (_, { request }) => {
    const user = await verifyUser(request)
    if (!user) throw redirect('/login')
    return user
  })
}
export const routeData = () => {
  return createServerData$(async (_, { request }) => {
    const user = await verifyUser(request)
    if (!user) throw redirect('/login')
    return user
  })
}
route.tsx 
export const routeData = () => {
  return createRouteData(() => {
    return someDataFetch()
  })
}
export const routeData = () => {
  return createRouteData(() => {
    return someDataFetch()
  })
}
Everything underneath (app) layout should be protected by auth. However, if I have it like this, the fetch of my route starts before the user has been verified. What is the best way to overcome this, without having to go into every single routeData across my app and wrap everything inside some kind of effect that tracks some global user. Basically, is there a way to make some part of a route blocking further execution until its data has resolved?
2 Replies
Raqueebuddin Aziz
Raqueebuddin Aziz•2y ago
You can just not return the route underneath till the auth is done Return something else unless auth is done
Martnart
MartnartOP•2y ago
I wanted to avoid this because it's very hands-on over dozens of files. Also, it messes up my type inference. I guess it's the only way though.

Did you find this page helpful?