RFC, Relay derivation

!overview

Container-local reasoning
Make containers able to fetch their own data without having to notify every ancestor
Drag-n-droppable components/containers

Root entry (usually index.js) takes in the 'schema.json' or 'schema.graphql' as a dependency, and parses schema
Every fragment and root query will be available then to every container

Containers can then fetch their own data without having to ask their parents and their parents... to do it

From the example below, you can introduce/remove <UserProfilePic /> to/from <Foo /> or <Bar /> without having to tell 20+ parents.

basic-example.js

class UserProfilePic extends React.Component {
  render() {return (
    <img src={this.props.imgURL} />
  )}
  constructor(props) {super(props)}
}

export default Relay.createContainer(UserProfilePic, {
  childProps: {
    imgURL: () => Relay.QL`fragment on User(${this.props.userID}) {imgURL}`
  },
  // also pass through all props
  // so child would get userID
}

// some random component somewhere
class Foo extends React.Component {
  render() {return (
    <UserProfilePic userID="1" />
  )}
}

// some other random component somewhere
class Bar extends React.Component {
  render() {return (
    <UserProfilePic userID="2" />
  )}
}

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import Relay from 'react-relay'
import Schema from './schema.json'
import App from './App.js'

// Relay parses the schema in root entry
const env = Relay.Store.Parse(Schema)

ReactDOM.render(
  <Relay.Root
      env={env}
      container={App}
  />,
  document.getElementById('mount')
)