Lazily create apollo client

client/coral-embed-stream/src/index.js

@@ -6,13 +6,14 @@ import {checkLogin} from 'coral-framework/actions/auth';
 import './graphql';
 import {addExternalConfig} from 'coral-embed-stream/src/actions/config';
 import {getStore, injectReducers} from 'coral-framework/services/store';
-import {client} from 'coral-framework/services/client';
+import {getClient} from 'coral-framework/services/client';
 import AppRouter from './AppRouter';
 import {pym} from 'coral-framework';
 import {loadPluginsTranslations, injectPluginsReducers} from 'coral-framework/helpers/plugins';
 import reducers from './reducers';
 
 const store = getStore();
+const client = getClient();
 
 loadPluginsTranslations();
 injectPluginsReducers();

client/coral-framework/services/client.js

@@ -2,27 +2,34 @@ import ApolloClient, {addTypename} from 'apollo-client';
 import {networkInterface} from './transport';
 import {SubscriptionClient, addGraphQLSubscriptions} from 'subscriptions-transport-ws';
 
-const wsClient = new SubscriptionClient(`ws://${location.host}/api/v1/live`, {
-  reconnect: true
-});
+let client;
 
-const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
-  networkInterface,
-  wsClient,
-);
+export function getClient() {
+  if (client) {
+    return client;
+  }
 
-export const client = new ApolloClient({
-  connectToDevTools: true,
-  addTypename: true,
-  queryTransformer: addTypename,
-  dataIdFromObject: (result) => {
-    if (result.id && result.__typename) { // eslint-disable-line no-underscore-dangle
-      return `${result.__typename}_${result.id}`; // eslint-disable-line no-underscore-dangle
-    }
-    return null;
-  },
-  networkInterface: networkInterfaceWithSubscriptions,
-});
+  const wsClient = new SubscriptionClient(`ws://${location.host}/api/v1/live`, {
+    reconnect: true
+  });
 
-export default client;
+  const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
+    networkInterface,
+    wsClient,
+  );
 
+  client = new ApolloClient({
+    connectToDevTools: true,
+    addTypename: true,
+    queryTransformer: addTypename,
+    dataIdFromObject: (result) => {
+      if (result.id && result.__typename) { // eslint-disable-line no-underscore-dangle
+        return `${result.__typename}_${result.id}`; // eslint-disable-line no-underscore-dangle
+      }
+      return null;
+    },
+    networkInterface: networkInterfaceWithSubscriptions,
+  });
+
+  return client;
+}

client/coral-framework/services/store.js

@@ -1,28 +1,7 @@
 import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
 import thunk from 'redux-thunk';
 import mainReducer from '../reducers';
-import {client} from './client';
-
-const apolloErrorReporter = () => (next) => (action) => {
-  if (action.type === 'APOLLO_QUERY_ERROR') {
-    console.error(action.error);
-  }
-  return next(action);
-};
-
-const middlewares = [
-  applyMiddleware(
-    client.middleware(),
-    thunk,
-    apolloErrorReporter,
-  ),
-];
-
-if (window.devToolsExtension) {
-
-  // we can't have the last argument of compose() be undefined
-  middlewares.push(window.devToolsExtension());
-}
+import {getClient} from './client';
 
 export function injectReducers(reducers) {
   const store = getStore();
@@ -35,9 +14,30 @@ export function getStore() {
     return window.coralStore;
   }
 
+  const apolloErrorReporter = () => (next) => (action) => {
+    if (action.type === 'APOLLO_QUERY_ERROR') {
+      console.error(action.error);
+    }
+    return next(action);
+  };
+
+  const middlewares = [
+    applyMiddleware(
+      getClient().middleware(),
+      thunk,
+      apolloErrorReporter,
+    ),
+  ];
+
+  if (window.devToolsExtension) {
+
+    // we can't have the last argument of compose() be undefined
+    middlewares.push(window.devToolsExtension());
+  }
+
   const coralReducers = {
     ...mainReducer,
-    apollo: client.reducer()
+    apollo: getClient().reducer()
   };
 
   window.coralStore = createStore(