SolidJS•16mo ago

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•16mo ago

You can just not return the route underneath till the auth is done Return something else unless auth is done

Martnart•16mo 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.

Gaming

Programming

Make routeData blocking