fetch data logic in route components

Enhancement

Suggestion by

@mmollaverdi

Reason to enhance/problem with existing solution

• Executing asynchronous API calls in containers never seemed to be the right place, particularly because it’s still a view, it should not be it’s concern (imo).
• Making a component fetch data through static methods feels hacky. It breaks down when trying to wrap this top level component with page level components, take a look at this. Our prerenderMiddleware won’t be able to find the fetchData method because it is no longer the top level component.
• Because Mehdi “The Don” Mollaverdi said so 😉

Suggested enhancement

<Route path="/a" fetch={fetchSpecificRouteData} component={SpecificRouteComponent} />

If we have a single fetchData method for each route, we no longer need a Promise.all in pre-render middleware because we only need to return a single promise.

[vsc-github]

@jrodl3r were you able to find a solution to pass URL params to the fetchData call in the Route component?

[jrodl3r]

@choonkending can you explain why we want to fire “CREATE_REQUEST” + “REQUEST_SUCCESS” on every location change? I’m just trying to comprehend the strategy better… As my setup will still have components w/ their own fetching, etc. and the console is a little dirty I guess is my only gripe…

just noticed that is happening on every URL (even w/ { data: undefined }) and not sure if I should be concerned…

Also, is there anyway to pass/access location.pathname or params inside the service? (For example: get the ID url param, and if (params.id !== state.id) axios.get() …or do nothing?)

I do like having this setup for base container components (home, dashboard, landing pages, etc.) - Thx!