react-apollo-graphql/lib/index.js

Get rid of decorators and use Apollo GraphQL queries and mutations in the simple and readable way.

'use strict';

exports.__esModule = true;
exports.getDataFromTree = undefined;

var _assign = require('babel-runtime/core-js/object/assign');

var _assign2 = _interopRequireDefault(_assign);

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _server = require('./server');

require('./types');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

if (typeof exports !== 'undefined') Object.defineProperty(exports, 'babelPluginFlowReactPropTypes_proptype_QueryInitializerOptions', {
  value: require('prop-types').shape({
    hasVariablesChanged: require('prop-types').func.isRequired
  })
});
if (typeof exports !== 'undefined') Object.defineProperty(exports, 'babelPluginFlowReactPropTypes_proptype_Queries', {
  value: require('prop-types').shape({})
});

// not used because of
// https://github.com/facebook/flow/issues/3986

// add server side render
// on server we have only 1 pass, so we can halt execution on all queries passed to GraphQL
// then wait for them to resolve, and call render function and repeat these steps
// until we have no more queries to process
var GraphQL = function (_React$Component) {
  (0, _inherits3.default)(GraphQL, _React$Component);

  function GraphQL() {
    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, GraphQL);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.hasMount = false, _this.observers = {}, _this.state = {}, _this.subscriptions = {}, _this.componentWillReceiveProps = function (nextProps) {
      // call hasVariablesChanged on all observable queries
      // and call setVariables() on them if they did not return false
      (0, _keys2.default)(_this.observers).forEach(function (key) {
        var variables = _this.observers[key].options.hasVariablesChanged(_this.props, nextProps);

        if (variables === false) {
          return;
        }

        if (variables === true) {
          throw new Error('hasVariablesChanged can\'t return true');
        }

        _this.observers[key].observer.setVariables(variables);
      });
    }, _this.getClient = function () {
      var clientFromContext = _this.context.client;
      var clientFromProps = _this.props.client;


      if (clientFromContext) {
        return clientFromContext;
      } else if (clientFromProps) {
        return clientFromProps;
      }

      throw new Error('Please specify apollo client using client prop or provide it using <ApolloProvider />.');
    }, _this.getObservers = function () {
      return (0, _keys2.default)(_this.observers).map(function (key) {
        return _this.observers[key].observer;
      });
    }, _this.updateResults = function (key, result) {
      if (!_this.hasMount) {
        return;
      }

      _this.setState(function (state) {
        var _Object$assign2;

        return (0, _assign2.default)({}, state, (_Object$assign2 = {}, _Object$assign2[key] = result, _Object$assign2));
      });
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  // somehow this is bug
  /* static defaultProps = {
    mutations: {},
    queries: {},
  };*/

  GraphQL.prototype.componentWillMount = function componentWillMount() {
    var _this2 = this;

    this.hasMount = true;

    var props = this.props;
    var _props = this.props,
        _props$mutations = _props.mutations,
        mutations = _props$mutations === undefined ? {} : _props$mutations,
        _props$queries = _props.queries,
        queries = _props$queries === undefined ? {} : _props$queries,
        render = _props.render;

    var client = this.getClient();

    // now process queries in props and assign subscriptions to internal state
    // so we can ubsubscribe from them on unmount
    // alse create state so we can update this component's state in response
    // to observable changes
    var results = (0, _keys2.default)(queries).reduce(function (state, key) {
      var _Object$assign3;

      var options = {
        hasVariablesChanged: function hasVariablesChanged() {
          return false;
        }
      };

      // now call query initializer with component's props and client
      var observer = queries[key](client, props, {
        hasVariablesChanged: function hasVariablesChanged(fn) {
          if (typeof fn !== 'function') {
            throw new Error('hasVariablesChanged for query ' + key + ' must be a function');
          }

          options.hasVariablesChanged = fn;
        }
      });

      _this2.observers[key] = {
        options: options,
        observer: observer
      };

      // subscribe to changes
      var subscription = observer.subscribe({
        next: function next() {
          return _this2.updateResults(key, observer.currentResult());
        },
        error: function error() {
          return _this2.updateResults(key, observer.currentResult());
        }
      });

      _this2.subscriptions[key] = subscription;

      return (0, _assign2.default)({}, state, (_Object$assign3 = {}, _Object$assign3[key] = observer.currentResult(), _Object$assign3));
    }, {});

    this.setState(results);
  };

  GraphQL.prototype.componentWillUnmount = function componentWillUnmount() {
    var _this3 = this;

    this.hasMount = false;

    // unsubscribe from all subscriptions
    (0, _keys2.default)(this.subscriptions).forEach(function (key) {
      _this3.observers[key].observer.stopPolling();
      _this3.subscriptions[key].unsubscribe();
    });
    this.subscriptions = {};
  };

  GraphQL.prototype.render = function render() {
    var _this4 = this;

    var _props2 = this.props,
        _props2$mutations = _props2.mutations,
        mutations = _props2$mutations === undefined ? {} : _props2$mutations,
        render = _props2.render;

    var client = this.getClient();

    // process mutation initializers
    var initializedMutations = (0, _keys2.default)(mutations).reduce(function (res, key) {
      var _Object$assign4;

      return (0, _assign2.default)({}, res, (_Object$assign4 = {}, _Object$assign4[key] = mutations[key](client, _this4.props), _Object$assign4));
    }, {});

    return render(this.state, initializedMutations, this.props);
  };

  return GraphQL;
}(_react2.default.Component);

GraphQL.contextTypes = {
  client: _propTypes2.default.object
};
GraphQL.propTypes = {
  client: require('prop-types').any,
  mutations: require('prop-types').any,
  queries: require('prop-types').any,
  render: require('prop-types').func.isRequired
};
exports.default = GraphQL;
exports.getDataFromTree = _server.getDataFromTree;