GraphQL HOC

graphql-hoc.js

import {gql} from 'components/graphql-container';

export class Welcome extends React.Component {

  static propTypes = {
    id: React.PropTypes.number,
    delayedUser: React.PropTypes.func.isRequired,
    params: React.PropTypes.object.isRequired,
    createAuditLog: React.PropTypes.object.isRequired,
  }

  state = {
    id: Number(this.props.params.id),
  }

  onFetchDelayedUser() {
    this.setState({id: this.state.id + 1}, this.props.delayedUser.fetch(this.state.id));
  }

  render() {
    return (
      <div>
        <h1>Welcome</h1>
        <button onClick={e => this.onFetchDelayedUser()}>
          Click To fetch new user
        </button>
        <br /><br />
        <button onClick={e => this.props.createAuditLog.commit({note: 'Hello Phoenix ReactJS', sentiment: 'success'})}>
          Click to create new audit log record
        </button>
      </div>
    );
  }
}

Welcome = gql(Welcome, {
  queries: (props) => ({

    // This query is a function, so it won't make a network request until the user triggers it
    delayedUser: (id) => `
      user(id: ${id}) {
        id,
        nickname
      }
    `,
  
    // Returns this.props.users on mount
    users: `
      users(limit: ${props.params.id}) {
        count,
        records {
          id,
          nickname
        }
      }
    `,

    // Returns this.props.auditLogs on mount 
    auditLogs: `
      auditLogs(limit: ${props.params.id}) {
        count,
        records {
          id,
          note
        }
      }
    `,
  }),

  mutations: (props) => ({
    createAuditLog: (input) => `{
      id,
      note,
      sentiment
    }`,
  }),
});