{"action":"closed","issue":{"url":"https://api.github.com/repos/facebook/relay/issues/966","repository_url":"https://api.github.com/repos/facebook/relay","labels_url":"https://api.github.com/repos/facebook/relay/issues/966/labels{/name}","comments_url":"https://api.github.com/repos/facebook/relay/issues/966/comments","events_url":"https://api.github.com/repos/facebook/relay/issues/966/events","html_url":"https://github.com/facebook/relay/issues/966","id":141884234,"number":966,"title":"Idea: Combining Routes and RootContainer into one root component","user":{"login":"dougli","id":2380110,"avatar_url":"https://avatars.githubusercontent.com/u/2380110?v=3","gravatar_id":"","url":"https://api.github.com/users/dougli","html_url":"https://github.com/dougli","followers_url":"https://api.github.com/users/dougli/followers","following_url":"https://api.github.com/users/dougli/following{/other_user}","gists_url":"https://api.github.com/users/dougli/gists{/gist_id}","starred_url":"https://api.github.com/users/dougli/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dougli/subscriptions","organizations_url":"https://api.github.com/users/dougli/orgs","repos_url":"https://api.github.com/users/dougli/repos","events_url":"https://api.github.com/users/dougli/events{/privacy}","received_events_url":"https://api.github.com/users/dougli/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/facebook/relay/labels/help%20wanted","name":"help wanted","color":"159818"}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2016-03-18T14:35:52Z","updated_at":"2016-07-06T17:21:26Z","closed_at":"2016-07-06T17:21:26Z","body":"I'm curious what you guys think of combining `Routes` and `RootContainer` into just one component.\r\n\r\nIt often is the case that most Relay pages / apps have a top level element that handles the initial entry point of Relay. This top level element is typically always paired with a specific route, and requires a `RootContainer` or `RelayRenderer` to work. As @ianstormtaylor has mentioned in https://github.com/facebook/relay/issues/822, the `Routes` / `RelayQueryConfig` concept is very lightweight and feels almost like a dangling object that needs to coexist with other things.\r\n\r\nI know that containers are meant to be composable anywhere, but given that there often is this top level element in practice, I was wondering if we can get rid of the complexity of these concepts and just have a root component that combines these together. The root component can also take care of handling error states, if they're passed in as props:\r\n\r\n```javascript\r\nvar StarWarsPage = React.createClass({\r\n  // Error and fetch states are handled here. Fetched props from Relay passed in as usual.\r\n  propTypes: {\r\n    relayFetchStatus: {\r\n      error: ...,\r\n      retry: ...,\r\n      stale: ...,\r\n      done: ...,\r\n    }\r\n  },\r\n\r\n  render: ...,\r\n});\r\n\r\nvar StarWarsPageContainer = Relay.createContainer(StarWarsPage, {\r\n  fragments: {\r\n    factions: () => Relay.QL`\r\n      fragment on Faction {\r\n        name\r\n      }\r\n    `\r\n  }\r\n});\r\n\r\n------\r\n\r\n// Combines Routes & RootContainer together\r\nclass StarWarsApp extends Relay.RootComponent {\r\n  static routeName = 'StarWarsAppHomeRoute';\r\n\r\n  static queries = {\r\n    factions: () => Relay.QL`query { factions }`,\r\n  };\r\n\r\n  static container = StarWarsPageContainer;\r\n}\r\n\r\n// Variables that the Route needs can be passed in as props to this component, if necessary.\r\nReactDOM.render(\r\n  <StarWarsApp />,\r\n  document.body\r\n);\r\n```\r\n\r\nThis goes a step short of making this enabled for all relay containers (so `StarWarsPageContainer` is still composable just like any other component), but introduces a distinction that it's possible to compose a top level element into an initial entry point for Relay. It also gets rid of a few concepts that I hope would be a simplification for everyone :)."}}
{"actor":{"display_login":"steveluscher"}}