title: Using Babel to Get ApolloClient to ES5 CommonJS Module Format for Node Environment
body: <h1>Using Babel to Get ApolloClient to ES5 CommonJS Module Format</h1>
  
  <p>Im trying to use Babel to get the apollo-client module to work as ES5 in a non-browser, node environment. I've gone through step below which always give me the same result.  Im trying to figure out if that result is right result for a node environment. When I import the babel processed documents into my project and call a method that should be exported, im getting, cannot find module. For context, the project is a fusetools.com demo. Fusetools does not support ES2015 Promises so the idea is that with the babel es2015 preset, it should work. I'm mostly chasing this down to learn something but it would be great if I could get it to work. Any comments on an easier way to do this, now that I understand it better, would be greatly appreciated. The project where I babeled the code can be found <a href="https://github.com/aarmand/apollo-client-babel-commonjs-project" rel="nofollow noreferrer">here</a>. The fusetools project where i used the transformed code is <a href="https://github.com/aarmand/InfiniteScrollerApollo" rel="nofollow noreferrer">here</a>. </p>
  
  <p>The error I get is :</p>
  
  <pre><code>LOG: Error: JavaScript error in MainView.ux line 9: Name: Fuse.Scripting.Error
  Error message: require(): module not found: js/apollo-client/ApolloClient.js
  File name: MainView.ux
  Line number: 9
  Source line:        var ApolloClient = require('js/apollo-client/ApolloClient.js'); 
  </code></pre>
  
  <p>This is the code im trying to reach:</p>
  
  <pre><code>```
  "use strict";
  
  var networkInterface_1 = require('./transport/networkInterface');
  var isUndefined = require('lodash.isundefined');
  var assign = require('lodash.assign');
  var isString = require('lodash.isstring');
  var store_1 = require('./store');
  var QueryManager_1 = require('./core/QueryManager');
  var storeUtils_1 = require('./data/storeUtils');
  var fragments_1 = require('./fragments');
  var getFromAST_1 = require('./queries/getFromAST');
  var DEFAULT_REDUX_ROOT_KEY = 'apollo';
  function defaultReduxRootSelector(state) {
      return state[DEFAULT_REDUX_ROOT_KEY];
  }
  var ApolloClient = function () {
      function ApolloClient(_a) {
          var _this = this;
          var _b = _a === void 0 ? {} : _a,
              networkInterface = _b.networkInterface,
              reduxRootKey = _b.reduxRootKey,
              reduxRootSelector = _b.reduxRootSelector,
              initialState = _b.initialState,
              dataIdFromObject = _b.dataIdFromObject,
              resultTransformer = _b.resultTransformer,
              resultComparator = _b.resultComparator,
              _c = _b.ssrMode,
              ssrMode = _c === void 0 ? false : _c,
              _d = _b.ssrForceFetchDelay,
              ssrForceFetchDelay = _d === void 0 ? 0 : _d,
              _e = _b.mutationBehaviorReducers,
              mutationBehaviorReducers = _e === void 0 ? {} : _e,
              _f = _b.addTypename,
              addTypename = _f === void 0 ? true : _f,
              queryTransformer = _b.queryTransformer;
          this.middleware = function () {
              return function (store) {
                  _this.setStore(store);
                  return function (next) {
                      return function (action) {
                          var returnValue = next(action);
                          _this.queryManager.broadcastNewStore(store.getState());
                          return returnValue;
                      };
                  };
              };
          };
          if (reduxRootKey &amp;&amp; reduxRootSelector) {
              throw new Error('Both "reduxRootKey" and "reduxRootSelector" are configured, but only one of two is allowed.');
          }
          if (reduxRootKey) {
              console.warn('"reduxRootKey" option is deprecated and might be removed in the upcoming versions, ' + 'please use the "reduxRootSelector" instead.');
              this.reduxRootKey = reduxRootKey;
          }
          if (queryTransformer) {
              throw new Error('queryTransformer option no longer supported in Apollo Client 0.5. ' + 'Instead, there is a new "addTypename" option, which is on by default.');
          }
          if (!reduxRootSelector &amp;&amp; reduxRootKey) {
              this.reduxRootSelector = function (state) {
                  return state[reduxRootKey];
              };
          } else if (isString(reduxRootSelector)) {
              this.reduxRootKey = reduxRootSelector;
              this.reduxRootSelector = function (state) {
                  return state[reduxRootSelector];
              };
          } else if (typeof reduxRootSelector === 'function') {
              this.reduxRootSelector = reduxRootSelector;
          } else {
              this.reduxRootSelector = null;
          }
          this.initialState = initialState ? initialState : {};
          this.networkInterface = networkInterface ? networkInterface : networkInterface_1.createNetworkInterface({ uri: '/graphql' });
          this.addTypename = addTypename;
          this.resultTransformer = resultTransformer;
          this.resultComparator = resultComparator;
          this.shouldForceFetch = !(ssrMode || ssrForceFetchDelay &gt; 0);
          this.dataId = dataIdFromObject;
          this.fieldWithArgs = storeUtils_1.storeKeyNameFromFieldNameAndArgs;
          if (ssrForceFetchDelay) {
              setTimeout(function () {
                  return _this.shouldForceFetch = true;
              }, ssrForceFetchDelay);
          }
          this.reducerConfig = {
              dataIdFromObject: dataIdFromObject,
              mutationBehaviorReducers: mutationBehaviorReducers
          };
          this.watchQuery = this.watchQuery.bind(this);
          this.query = this.query.bind(this);
          this.mutate = this.mutate.bind(this);
          this.setStore = this.setStore.bind(this);
          this.resetStore = this.resetStore.bind(this);
      }
      ApolloClient.prototype.watchQuery = function (options) {
          this.initStore();
          if (!this.shouldForceFetch &amp;&amp; options.forceFetch) {
              options = assign({}, options, {
                  forceFetch: false
              });
          }
          fragments_1.createFragment(options.query);
          var fullDocument = getFromAST_1.addFragmentsToDocument(options.query, options.fragments);
          var realOptions = Object.assign({}, options, {
              query: fullDocument
          });
          delete realOptions.fragments;
          return this.queryManager.watchQuery(realOptions);
      };
      ;
      ApolloClient.prototype.query = function (options) {
          this.initStore();
          if (!this.shouldForceFetch &amp;&amp; options.forceFetch) {
              options = assign({}, options, {
                  forceFetch: false
              });
          }
          fragments_1.createFragment(options.query);
          var fullDocument = getFromAST_1.addFragmentsToDocument(options.query, options.fragments);
          var realOptions = Object.assign({}, options, {
              query: fullDocument
          });
          delete realOptions.fragments;
          return this.queryManager.query(realOptions);
      };
      ;
      ApolloClient.prototype.mutate = function (options) {
          this.initStore();
          var fullDocument = getFromAST_1.addFragmentsToDocument(options.mutation, options.fragments);
          var realOptions = Object.assign({}, options, {
              mutation: fullDocument
          });
          delete realOptions.fragments;
          return this.queryManager.mutate(realOptions);
      };
      ;
      ApolloClient.prototype.subscribe = function (options) {
          this.initStore();
          var fullDocument = getFromAST_1.addFragmentsToDocument(options.query, options.fragments);
          var realOptions = Object.assign({}, options, {
              document: fullDocument
          });
          delete realOptions.fragments;
          delete realOptions.query;
          return this.queryManager.startGraphQLSubscription(realOptions);
      };
      ApolloClient.prototype.reducer = function () {
          return store_1.createApolloReducer(this.reducerConfig);
      };
      ApolloClient.prototype.initStore = function () {
          if (this.store) {
              return;
          }
          if (this.reduxRootSelector) {
              throw new Error('Cannot initialize the store because "reduxRootSelector" or "reduxRootKey" is provided. ' + 'They should only be used when the store is created outside of the client. ' + 'This may lead to unexpected results when querying the store internally. ' + "Please remove that option from ApolloClient constructor.");
          }
          this.setStore(store_1.createApolloStore({
              reduxRootKey: DEFAULT_REDUX_ROOT_KEY,
              initialState: this.initialState,
              config: this.reducerConfig
          }));
          this.reduxRootKey = DEFAULT_REDUX_ROOT_KEY;
      };
      ;
      ApolloClient.prototype.resetStore = function () {
          this.queryManager.resetStore();
      };
      ;
      ApolloClient.prototype.setStore = function (store) {
          var reduxRootSelector;
          if (this.reduxRootSelector) {
              reduxRootSelector = this.reduxRootSelector;
          } else {
              reduxRootSelector = defaultReduxRootSelector;
              this.reduxRootKey = DEFAULT_REDUX_ROOT_KEY;
          }
          if (isUndefined(reduxRootSelector(store.getState()))) {
              throw new Error('Existing store does not use apolloReducer. Please make sure the store ' + 'is properly configured and "reduxRootSelector" is correctly specified.');
          }
          this.store = store;
          this.queryManager = new QueryManager_1.QueryManager({
              networkInterface: this.networkInterface,
              reduxRootSelector: reduxRootSelector,
              store: store,
              addTypename: this.addTypename,
              resultTransformer: this.resultTransformer,
              resultComparator: this.resultComparator,
              reducerConfig: this.reducerConfig
          });
      };
      ;
      return ApolloClient;
  }();
  Object.defineProperty(exports, "__esModule", { value: true });
  exports.default = ApolloClient;
  //# sourceMappingURL=ApolloClient.js.map
  ```
  </code></pre>
  
  <p>Any and all comments I might learn from are appreciated. Thank you.</p>