How do we Feel About Relay (+vs Apollo)?

My team built a high performance mobile site with Relay Classic, and then refactored to Relay Modern when it was released. In addition to what everyone else said, I think the main tradeoffs between Relay Modern and Apollo are ones of simplicity vs performance.

  • When we compared Relay Classic and Apollo they both had similar (somewhat large) bundle sizes. When we switched to Relay Modern we dropped ~100kb after gzip from our bundle.
  • relay-compiler is another build step your app needs on top of webpack. This leads to a more complex build process but it will generate more optimized queries. You also have the ability to persist the graphql queries to you server at build time to save on upload costs.

  • Using with redux - it seems to trip a lot of people up, but I've used redux with all of my Relay apps. I will store all client based state in either React local state or redux and keep server state in the Relay Store. Usually redux state will feed into Relay by using state from the redux store as variables for the Relay GraphQL queries. Something like this:

    function MyComponent(props) { return ( <QueryRenderer variables={{itemId: props.itemId}} query={graphql` query myQuery( $itemId: String! ) { viewer { item(itemId: $itemId) { itemTitle } } } `} render={({props}) => { .... }} ); }

    connect(state => {itemId: state.itemId})(MyComponent);

/r/reactjs Thread