relay-tools/react-router-relay

Suggestion: add prevProps to render callback

nikgraf opened this issue · 1 comments

I found it useful to continue rendering all states until loading was done. Currently this can be done with returning undefined. It becomes tricky once you want to render loading indicators. I worked around it by doing this:

let previousAppProps = null;

const renderAppRoute = ({ done, props, element }) => {
  if (done) {
    previousAppProps = props;
    return React.cloneElement(element, { ...props, loading: false });
  }
  // By rendering this route with the previous props the UI shows the same view
  // until it's finished fetching the new data.
  if (previousAppProps) {
    return React.cloneElement(element, { ...previousAppProps, loading: true });
  }

  return <AppLoading />;
};
<Route
  path="/"
  component={App}
  queries={AppQueries}
  prepareParams={prepareParams}
  render={renderAppRoute}
>

My suggestion is to store the previous props and pass them into the render callback.

taion commented

I agree that this is useful, but it's an explicit goal here to keep the API on render as close as possible to that for RelayRenderer itself. This is additional functionality that's probably better implemented in user space.