Moving out apollo logic to not clutter worker too much

Author: Gongreg

.eslintrc

@@ -25,6 +25,7 @@
           "__REPORT_REACT_DEVTOOLS_PORT__",
           "__FETCH_SUPPORT__",
           "__NETWORK_INSPECT__",
+          "__APOLLO_CLIENT__",
           "__APOLLO_DEVTOOLS_SHOULD_DISPLAY_PANEL__"
         ]
       }

app/middlewares/debuggerAPI.js

@@ -30,16 +30,19 @@ let host;
 let port;
 let socket;
 
+const APOLLO_BACKEND = 'apollo-devtools-backend';
+const APOLLO_PROXY = 'apollo-devtools-proxy';
+
 const workerOnMessage = message => {
   const { data } = message;
 
-  if (data && data.source === 'apollo-devtools-backend') {
+  if (data && data.source === APOLLO_BACKEND) {
     if (!window.__APOLLO_DEVTOOLS_SHOULD_DISPLAY_PANEL__) {
       window.__APOLLO_DEVTOOLS_SHOULD_DISPLAY_PANEL__ = true;
     }
 
     postMessage({
-      source: 'apollo-devtools-backend',
+      source: APOLLO_BACKEND,
       payload: data,
     }, '*');
   }
@@ -56,10 +59,10 @@ const workerOnMessage = message => {
 };
 
 const onWindowMessage = e => {
-  const {data} = e;
-  if (data && data.source === 'apollo-devtools-proxy') {
+  const { data } = e;
+  if (data && data.source === APOLLO_PROXY) {
     const message = typeof data.payload === 'string' ? { event: data.payload } : data.payload;
-    worker.postMessage({ source: 'apollo-devtools-proxy', ...message });
+    worker.postMessage({ source: APOLLO_PROXY, ...message });
   }
 };
 

app/worker/apollo.js

@@ -0,0 +1,47 @@
+import Bridge from 'apollo-client-devtools/bridge';
+import { initBackend, sendBridgeReady } from 'apollo-client-devtools/backend';
+import { version as devToolsVersion } from 'apollo-client-devtools/package.json';
+import { getSafeAsyncStorage } from './asyncStorage';
+
+export function handleApolloClient(modules) {
+  const interval = setInterval(() => {
+    if (!self.__APOLLO_CLIENT__) {
+      return;
+    }
+
+    clearInterval(interval);
+
+    const hook = {
+      ApolloClient: self.__APOLLO_CLIENT__,
+      devToolsVersion,
+    };
+
+    let listener;
+
+    const bridge = new Bridge({
+      listen(fn) {
+        listener = self.addEventListener('message', evt => {
+          if (evt.data.source === 'apollo-devtools-proxy') {
+            return fn(evt.data);
+          }
+        });
+      },
+      send(data) {
+        postMessage({
+          ...data,
+          source: 'apollo-devtools-backend',
+        });
+      },
+    });
+
+    bridge.on('init', () => {
+      sendBridgeReady();
+    });
+
+    bridge.on('shutdown', () => {
+      self.removeEventListener('message', listener);
+    });
+
+    initBackend(bridge, hook, getSafeAsyncStorage(modules.AsyncStorage));
+  }, 1000);
+}

app/worker/asyncStorage.js

@@ -3,23 +3,22 @@ export const getClearAsyncStorageFn = AsyncStorage => {
   return () => AsyncStorage.clear().catch(f => f);
 };
 
-export const getSafeAsyncStorage = AsyncStorage => {
-  return {
-    async getItem(key) {
-      try {
-        return AsyncStorage.getItem(key);
-      } catch (e) {
-        return null;
-      }
-    },
-    async setItem(key, value) {
-      try {
-        return AsyncStorage.setItem(key, value);
-      } catch (e) {
-      }
+export const getSafeAsyncStorage = AsyncStorage => ({
+  async getItem(key) {
+    try {
+      return AsyncStorage.getItem(key);
+    } catch (e) {
+      return null;
     }
-  }
-};
+  },
+  async setItem(key, value) {
+    try {
+      return AsyncStorage.setItem(key, value);
+    } catch (e) {
+      return null;
+    }
+  },
+});
 
 export const getShowAsyncStorageFn = AsyncStorage => {
   if (!AsyncStorage.getAllKeys || !AsyncStorage.getItem) return;

app/worker/index.js

@@ -17,10 +17,8 @@ import devToolsEnhancer, { composeWithDevTools } from './reduxAPI';
 import * as RemoteDev from './remotedev';
 import { getRequiredModules, ignoreRNDIntervalSpy } from './utils';
 import { toggleNetworkInspect } from './networkInspect';
-import { getSafeAsyncStorage } from './asyncStorage';
-import Bridge from 'apollo-client-devtools/bridge';
-import { initBackend, sendBridgeReady } from 'apollo-client-devtools/backend';
-import { version as devToolsVersion } from 'apollo-client-devtools/package.json';
+import { handleApolloClient } from './apollo';
+
 /* eslint-disable no-underscore-dangle */
 self.__REMOTEDEV__ = RemoteDev;
 
@@ -55,47 +53,7 @@ const setupRNDebugger = async message => {
     reportDefaultReactDevToolsPort(modules);
   }
 
-  const interval = setInterval(() => {
-    if (!self.__APOLLO_CLIENT__) {
-      return;
-    }
-
-    clearInterval(interval);
-
-    const hook = {
-      ApolloClient: self.__APOLLO_CLIENT__,
-      devToolsVersion
-    };
-
-    let listener;
-
-    const bridge = new Bridge({
-      listen(fn) {
-        listener = self.addEventListener('message', evt => {
-          if (evt.data.source === 'apollo-devtools-proxy') {
-            return fn(evt.data);
-          }
-        });
-      },
-      send(data) {
-        postMessage({
-          ...data,
-          source: 'apollo-devtools-backend',
-        });
-      },
-    });
-
-    bridge.on('init', () => {
-      sendBridgeReady();
-    });
-
-    bridge.on("shutdown", () => {
-      self.removeEventListener('message', listener);
-    });
-
-    initBackend(bridge, hook, getSafeAsyncStorage(modules.AsyncStorage));
-
-  }, 1000);
+  handleApolloClient(modules);
 };
 
 const messageHandlers = {

electron/extensions.js

@@ -13,9 +13,10 @@ export default async () => {
       } catch (e) {} // eslint-disable-line
     }
     BrowserWindow.addDevToolsExtension(path.resolve('dist/devtools-helper/'));
-
   } else {
     BrowserWindow.addDevToolsExtension(path.join(__dirname, 'devtools-helper/'));
   }
-  BrowserWindow.addDevToolsExtension(path.resolve('../apollo-client-devtools/shells/webextension/'));
+  BrowserWindow.addDevToolsExtension(
+    path.resolve('../node_modules/apollo-client-devtools/shells/webextension/')
+  );
 };

package.json

@@ -70,7 +70,7 @@
   },
   "dependencies": {
     "adbkit": "^2.11.0",
-    "apollo-dev-tools": "*",
+    "apollo-client-devtools": "*",
     "electron-context-menu": "jhen0409/electron-context-menu#async-popup",
     "electron-fetch": "^1.2.1",
     "electron-gh-releases": "^2.0.4",