react-apollo#connect JavaScript Examples

The following examples show how to use react-apollo#connect. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: load-data.jsx    From Spoke with MIT License 4 votes vote down vote up 
loadData = (Component, connectArgs, { showTraceLog = false } = {}) => {
  function traceLog(...args) {
    if (showTraceLog) {
      console.log(...args);
    }
  }

  class LoadData extends React.Component {
    constructor(props) {
      super(props);
      traceLog("CONSTRUCTOR", this.dataProps(props));

      const isLoading = this.isLoading(props);
      this.state = {
        isLoading,
        lastReceivedData: isLoading ? {} : this.dataProps(props)
      };
    }

    // This ensures that the loading
    // indicator only shows on the first
    // load and not when refetch is called
    UNSAFE_componentWillReceiveProps(props) {
      traceLog("PROPS", this.dataProps(props));

      const isLoading = this.isLoading(props);

      if (this.state.isLoading && !isLoading) {
        this.setState({
          isLoading: false
        });
      }

      if (!isLoading) {
        this.setState({
          lastReceivedData: this.dataProps(props)
        });
      }
    }

    dataProps(props) {
      const newProps = {};
      Object.keys(props).forEach(propName => {
        const prop = props[propName];
        if (
          prop &&
          prop.hasOwnProperty("loading") &&
          prop.hasOwnProperty("errors") &&
          prop.hasOwnProperty("refetch")
        ) {
          newProps[propName] = prop;
        }
      });
      traceLog(props, newProps);
      return newProps;
    }

    isLoading(props) {
      let isLoading = false;
      Object.keys(this.dataProps(props)).forEach(propName => {
        if (props[propName].loading) {
          isLoading = true;
        }
      });
      return isLoading;
    }

    render() {
      const dataProps = this.dataProps(this.props);
      Object.keys(dataProps).forEach(prop => {
        if (dataProps[prop].errors) {
          console.error("ERROR IN REQUEST", dataProps[prop].errors);
        }
      });

      if (this.state.isLoading) {
        traceLog("LOADING");
        return <LoadingIndicator />;
      }

      traceLog("RENDERING", this.props, this.state.lastReceivedData);
      return <Component {...this.props} {...this.state.lastReceivedData} />;
    }
  }

  return connect(connectArgs)(LoadData);
}