Deferred routes support

[romancavry]

Good day!

I'm having a trouble trying to figure out how to make my data request to fire in sequence.
For example this code:

const appRoute = createRoute({
  path: '/',
  component: lazyRouteComponent(() => import('./App')),
  loader: async () => {
    await dispatch(api.endpoints.getMyUser.initiate());
  },
});

const newsRoute = createRoute({
  getParentRoute: () => appRoute,
  path: 'news',
  component: lazyRouteComponent(() => import('./News')),
  loader: async () => {
    const user = api.endpoints.getMyUser.select()(getState());

    await dispatch(api.endpoints.getNews.initiate({ userId: user.id ));
  },
});

I would like appRoute's loader to fetch the user and make the nested newsRoute wait until the promise is resolved. Then, I want to make news request with proper userId.

Now all promises fire at once and don't wait until either of them finishes. However, I need a way to make nested loaders to be pending until upper-level loader promises are resolved, and in case if upper-level promises throw an error I don't want lower-level loaders to fire at all. Is it possible?

[romancavry]

Maybe the example above is not showing the right case of the problem. The other example can be like this: newsRoute loads data only after appRoute finishes some authentication request to determine if the user is authorized and can get news.

[schiller-manuel]

you can access the parentMatch in the loader via parentMatchPromise

[romancavry]

@schiller-manuel
Thank you for the answer!

Maybe I can just use beforeLoad instead of loader to fetch routes' data, in case I need all of them to be deferred?

[schiller-manuel]

probably yes as beforeLoad are executed serially