search

RickWong / react-transmit

Relay-inspired library based on Promises instead of GraphQL.
BSD 3-Clause "New" or "Revised" License
1.31k stars 61 forks source link

Nested container #47

Closed L42y closed 8 years ago

L42y commented 8 years ago

When I use react-router together with react-transmit, I have a following use case:

This is the route definition:

<Route path="/" component={Layout}>
    <IndexRoute component={Home}/>
</Route>

Both Layout and Home is or has react-transmit container, When render on server-side, only fragments in Layout resolved and pass into client-side.

I wonder if nested container is possible on isomorphic app, or is there any pattern I can use to have a global fragment (eg. user session).

Thanks!

RickWong commented 8 years ago

Hi @L42y thanks for asking.

Since Transmit resolves data before and regardless of the React Component Tree (RCT) you need to compose the Transmit Promise Resolving Tree (PRT) separately. In your case, Layout should be the root container, the one with initialVariables. Then Home could simply be nested by calling Home.getFragment(...) etc within a Layout-fragment. When adding more pages than just Home you'll probably add some switch-statements in the Layout-fragment to decide which page's fragments to nest. For example, Layout may nest About-fragments instead, depending on the route.

React doesn't have async rendering built-in, that's why isomorphic React and Transmit still relies on the concept of a separate PRT that resembles the RCT. When React supports async rendering in the future, we can attach our fragment queries directly to the RCT. More details here: https://github.com/facebook/react/issues/1739

The above is only necessary for the isomorphic part. For the client-side only/React Native stuff, deeper root containers are allowed, and deferred fragments are recommended as well to speed up the initial render.

L42y commented 8 years ago

Thanks for your great explanation!

ngduc commented 8 years ago

@RickWong @L42y Do you have an example how to do that by any chance? Thanks.

dimaip commented 8 years ago

@ngduc just a dummy example of how I have to do it currently: https://github.com/dimaip/neos-react-render/blob/master/src/Components/Root.js#L19

@RickWong hey, do you know if React would ever support async rendering in the future? Because from that discussion it doesn't seem they are planning to do anything in that direction... For me currently it's a major bummer, that increases the complexity of my components a lot. I even think of sacrificing server-side rendering in favor of simplicity for now.