clayallsopp

{
  "compilerOptions": {
    "allowJs": true,
    "outDir": "tsDist",
    "module": "es6",
    "target": "es6"
  },
  "exclude": [
    "node_modules",
    "tsDist",

clayallsopp

"scripts": {
  "build": "rm -rf ./dist/ && webpack && open index.html"
}

clayallsopp

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "out.js",
    path: __dirname + "/dist",
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,

clayallsopp

export class User {
  constructor(handle) {
    this.handle = handle;
  }
}

clayallsopp

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { User } from './User';

class MyComponent extends React.Component {
  render() {
    return <div>{ this.props.user.handle }</div>;
  }
}

clayallsopp

class Explorer extends React.Component {
  render() {
    let currentKey = this.props.relay.variables.id;
    let style = {};
    if (this.props.relay.hasOptimisticUpdate(this.props.item.getValue)) {
      style.color = 'red';
    }

    return <div>
      <input type='text' placeholder='Key' value={ currentKey } onChange={ this._onChange.bind(this) } />

clayallsopp

class SaveKeyMutation extends Relay.Mutation {
  // ..
  getOptimisticResponse() {
    return {
      item : {
        id : this.props.item.id,
        value : this.props.item.value,
      }
    }
  }

clayallsopp

class Explorer extends React.Component {
  // ..
  _onClick() {
    let id   = this.refs.newKey.value;
    let value = this.refs.newValue.value;

    Relay.Store.update(
      new SaveKeyMutation({
        item: { id, value },
      })

clayallsopp

class Explorer extends React.Component {
  render() {
    let currentKey = this.props.relay.variables.id;

    return <div>
      <input type='text' placeholder='Key' value={ currentKey } onChange={ this._onChange.bind(this) } />
      <div>Key: { currentKey }</div>
      <div>Value: { this.props.item.getValue.value }</div>
      <hr />
      <input type='text' placeholder='Key' ref='newKey' />

clayallsopp

class SaveKeyMutation extends Relay.Mutation {
  // ..
  getConfigs() {
    return [{
      type: 'FIELDS_CHANGE',
      fieldIDs: {
        item: this.props.item.id,
      },
    }];
  }