Data fetching in 1.0.0’s onEnter — possible? Good idea in the first place?

I’m wondering what the recommended practice for fetching data necessary for rendering a route is in 1.0.0. Let’s say a user browses to /post/123, I’d like to make a call to my API to make sure that this Post is in my stores and ready to go.

At the moment I’ve been firing these API actions in componentWillMount, but part of me wonders if it would be better to do this kind of work in 1.0.0 Route’s onEnter? I can’t get that to work as my API actions return Promises and I can’t see anyway to trigger a transition manually, but then again, how would I display any visual indication that the app is loading something this way?

To sum it up, can onEnter be used to defer a transition until a promise is fulfilled, and is this a good idea in the first place? Thanks very much.

[mjackson]

No, do not fetch data in onEnter. This is always a bad idea because the UI will not be responsive while you’re fetching data.

Please see the AsyncProps code (still experimental) for some ideas we have around how to do this properly.

[freshtonic]

@mjackson IMHO having top-level components load their own data is both more complex from a programming perspective (because at least two states are needed: loading/loaded) and transitioning before data is loaded is janky as components all resize to accommodate data as it arrives. I’d much rather have route transitions take a little longer. The perception of slowness can be solved with visual feedback such as loading indicators.

If it is indeed possible to do async data loading with onEnter then I suggest that you retain the name and not rename it 😃 Might I also suggest that this becomes an officially supported use case - instead of advocating not data loading in onEnter how about just explaining the trade-offs? Not everybody shares the opinion that data loading must not be async.