Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

relay

 relay

Kazuhito Hokamura

May 31, 2016
Tweet

More Decks by Kazuhito Hokamura

Other Decks in Technology

Transcript

  1. http://example.com/graphql { "product" : { "id": 1, "name": "foo", "description":

    "..." "image": { "uri": "http://...", "width": 120, "height": 120 } } } { product(id: 1) { id, name, description, image(size: 120) { uri, width, height } } } 3FRVFTU 3FTQPOTF
  2. class AppComponent extends React.Component { handleSelect(id) { fetch(`/products/{id}`).then(product => {

    // update state }); } render() { return ( let { name, description } = this.props.app.product; <div> <ProductSelect onChange={id => this.handleSelect(id)} /> <h1>{name}</h1> <div>{description}</div> </div> ); } } ໋ྩత એݴత
  3. class AppComponent extends React.Component { handleSelect(id) { this.props.relay.setVariables({ id });

    } render() { let { name, description } = this.props.app.product; return ( // Reactͷྫͱಉ༷ ); } } const AppContainer = Relay.createContainer(AppComponent, { initialVariables: { id: 1 }, fragments: { app: () => Relay.QL` fragment on App { product(id: $id) { name, description } } `, }, }); એݴత
  4. query BlogApp { post { title body author { name

    } comments { body user { name }
 } } }
  5. query PostApp { ...post
 } fragment post on Post {

    titlt body author { ...user } comments { ...comment } } fragment comment on Comment { body user { ...user }
 } fragment user on User { name
 }
  6. class PostComponent extends React.Component { //... } export default Relay.createContainer(PostComponent,

    { fragments: { post: () => Relay.QL` fragment on Post { id, title, body author { ${Author.getFragment('user')} } comments { ${Comment.getFragment('comment')} } } ` } });
  7. Relay.createContainer(PostComponent, { fragments: { post: () => Relay.QL` fragment on

    Post { id title body author { ${Author.getFragment('user')} } comments { ${Comment.getFragment('comment')} } } ` } });
  8. type Query { post: Post } type Post { id:

    ID! title: String! body: String author: User comments: [Comment] } type Comment { text: String! user: User } type User { name: String! }