Adding apollo dev tools.

.eslintrc

@@ -24,7 +24,8 @@
           "__PLATFORM__",
           "__REPORT_REACT_DEVTOOLS_PORT__",
           "__FETCH_SUPPORT__",
-          "__NETWORK_INSPECT__"
+          "__NETWORK_INSPECT__",
+          "__APOLLO_DEVTOOLS_SHOULD_DISPLAY_PANEL__"
         ]
       }
     ],

app/middlewares/debuggerAPI.js

@@ -32,6 +32,18 @@ let socket;
 
 const workerOnMessage = message => {
   const { data } = message;
+
+  if (data && data.source === 'apollo-devtools-backend') {
+    if (!window.__APOLLO_DEVTOOLS_SHOULD_DISPLAY_PANEL__) {
+      window.__APOLLO_DEVTOOLS_SHOULD_DISPLAY_PANEL__ = true;
+    }
+
+    postMessage({
+      source: 'apollo-devtools-backend',
+      payload: data,
+    }, '*');
+  }
+
   if (data && (data.__IS_REDUX_NATIVE_MESSAGE__ || data.__REPORT_REACT_DEVTOOLS_PORT__)) {
     return true;
   }
@@ -43,14 +55,22 @@ const workerOnMessage = message => {
   socket.send(JSON.stringify(data));
 };
 
+const onWindowMessage = e => {
+  const {data} = e;
+  if (data && data.source === 'apollo-devtools-proxy') {
+    const message = typeof data.payload === 'string' ? { event: data.payload } : data.payload;
+    worker.postMessage({ source: 'apollo-devtools-proxy', ...message });
+  }
+};
+
 const createJSRuntime = () => {
   // This worker will run the application javascript code,
   // making sure that it's run in an environment without a global
   // document, to make it consistent with the JSC executor environment.
   // eslint-disable-next-line
   worker = new Worker(`${__webpack_public_path__}RNDebuggerWorker.js`);
   worker.addEventListener('message', workerOnMessage);
-
+  window.addEventListener('message', onWindowMessage);
   actions.setDebuggerWorker(worker, 'connected');
 };
 
@@ -59,6 +79,7 @@ const shutdownJSRuntime = () => {
   scriptExecuted = false;
   if (worker) {
     worker.terminate();
+    window.removeEventListener('messsage', onWindowMessage);
     setDevMenuMethods([]);
   }
   worker = null;

app/worker/asyncStorage.js

@@ -3,6 +3,24 @@ 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 getShowAsyncStorageFn = AsyncStorage => {
   if (!AsyncStorage.getAllKeys || !AsyncStorage.getItem) return;
   return async () => {

app/worker/index.js

@@ -17,7 +17,10 @@ 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';
 /* eslint-disable no-underscore-dangle */
 self.__REMOTEDEV__ = RemoteDev;
 
@@ -51,6 +54,48 @@ const setupRNDebugger = async message => {
     checkAvailableDevMenuMethods(modules, message.networkInspect);
     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);
 };
 
 const messageHandlers = {
@@ -66,6 +111,7 @@ const messageHandlers = {
     } catch (err) {
       error = err.message;
     }
+
     sendReply(null /* result */, error);
 
     if (!error) {

electron/extensions.js

@@ -13,7 +13,9 @@ 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/'));
 };

package.json

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