Make routeData blocking

Following scenario:

(app).tsx
(app)/
  route.tsx

(app).tsx
(app)/
  route.tsx

(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
  })
}

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()
  })
}

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?

Make routeData blocking

Similar Threads

Similar Threads

Similar Threads