Trying to reduce amount of hacky code, so we could reuse apollo dev tools code in the debugger.

Author: Gongreg

app/middlewares/debuggerAPI.js

@@ -33,11 +33,10 @@ let socket;
 const workerOnMessage = message => {
   const { data } = message;
 
-  if (data.APOLLO_MESSAGE) {
+  if (data.source === 'apollo-devtools-backend') {
     postMessage({
-      event: data.event,
-      payload: data,
       source: 'apollo-devtools-backend',
+      payload: data,
     }, "*");
   }
 

app/worker/apollo/broadcastQueries.js renamed to app/worker/apollo/backend/broadcastQueries.js

@@ -1,8 +1,8 @@
 import genUuid from "uuid/v1";
 
-export const checkVersions = async (hook, bridge) => {
-  const uuid = genUuid();
+let uuid = genUuid();
 
+export const checkVersions = (hook, bridge) => {
   const { version } = hook.ApolloClient;
   const { devToolsVersion } = hook;
 

app/worker/apollo/checkVersions.js renamed to app/worker/apollo/backend/checkVersions.js

@@ -0,0 +1,97 @@
+// IMPORTANT: this script is injected into every page!!!
+
+/**
+ * Install the hook on window, which is an event emitter.
+ * Note because Chrome content scripts cannot directly modify the window object,
+ * we are evaling this function by inserting a script tag. That's why we have
+ * to inline the whole event emitter implementation here.
+ *
+ * special thanks to the Vue devtools for this solution
+ */
+
+export function installHook(window, devToolsVersion) {
+  let listeners = {};
+
+  // XXX change how ApolloClient connects to the dev tools
+  const hook = {
+    ApolloClient: null,
+    actionLog: [],
+    devToolsVersion,
+    on(event, fn) {
+      event = "$" + event;
+      (listeners[event] || (listeners[event] = [])).push(fn);
+    },
+    once(event, fn) {
+      const eventAlias = event;
+      event = "$" + event;
+      function on() {
+        this.off(eventAlias, on);
+        fn.apply(this, arguments);
+      }
+      (listeners[event] || (listeners[event] = [])).push(on);
+    },
+    off(event, fn) {
+      event = "$" + event;
+      if (!arguments.length) {
+        listeners = {};
+      } else {
+        const cbs = listeners[event];
+        if (cbs) {
+          if (!fn) {
+            listeners[event] = null;
+          } else {
+            for (let i = 0, l = cbs.length; i < l; i++) {
+              const cb = cbs[i];
+              if (cb === fn || cb.fn === fn) {
+                cbs.splice(i, 1);
+                break;
+              }
+            }
+          }
+        }
+      }
+    },
+    emit(event) {
+      event = "$" + event;
+      let cbs = listeners[event];
+      if (cbs) {
+        const args = [].slice.call(arguments, 1);
+        cbs = cbs.slice();
+        for (let i = 0, l = cbs.length; i < l; i++) {
+          cbs[i].apply(this, args);
+        }
+      }
+    },
+  };
+
+  Object.defineProperty(window, "__APOLLO_DEVTOOLS_GLOBAL_HOOK__", {
+    get() {
+      return hook;
+    },
+  });
+
+  // XXX this is a patch to back support previous versions of Apollo Client
+  // at somepoint we should remove this.
+  // the newer version has the client connecting to the hook, not the other
+  // way around that it currently does
+  let interval;
+  let count = 0;
+  function findClient() {
+    // only try for 10seconds
+    if (count++ > 10) clearInterval(interval);
+    if (!!window.__APOLLO_CLIENT__) {
+      hook.ApolloClient = window.__APOLLO_CLIENT__;
+      hook.ApolloClient.__actionHookForDevTools(
+        ({
+          state: { queries, mutations },
+          dataWithOptimisticResults: inspector,
+        }) => {
+          hook.actionLog.push({ queries, mutations, inspector });
+        },
+      );
+      clearInterval(interval);
+    }
+  }
+
+  interval = setInterval(findClient, 1000);
+}

app/worker/apollo/backend/hook.js

@@ -0,0 +1,28 @@
+// This is the agent that is injected into the page that an Apollo Client app lives in
+// when the Apollo Devtools panel is activated.
+import { initBroadCastEvents } from "./broadcastQueries";
+import { initLinkEvents } from "./links";
+import { checkVersions } from "./checkVersions";
+
+// hook should have been injected before this executes.
+let hook;
+let bridge;
+let connected;
+
+const connect = () => {
+  if (connected) return;
+  connected = true;
+  if (Number(hook.ApolloClient.version[0]) !== 1) {
+    initLinkEvents(hook, bridge);
+    initBroadCastEvents(hook, bridge);
+  }
+  bridge.log("backend ready.");
+  bridge.send("ready", hook.ApolloClient.version);
+  checkVersions(hook, bridge);
+};
+
+export const initBackend = (b, h) => {
+  bridge = b;
+  hook = h;
+  connect();
+};

app/worker/apollo/backend/index.js

@@ -21,7 +21,6 @@ export default class Bridge extends EventEmitter {
 
   send(event, payload) {
     this.wall.send({
-      APOLLO_MESSAGE: true,
       event,
       payload,
     });

app/worker/apollo/links.js renamed to app/worker/apollo/backend/links.js

@@ -18,9 +18,7 @@ import * as RemoteDev from './remotedev';
 import { getRequiredModules, ignoreRNDIntervalSpy } from './utils';
 import { toggleNetworkInspect } from './networkInspect';
 import Bridge from './apollo/bridge';
-import { initBroadCastEvents } from "./apollo/broadcastQueries";
-import { initLinkEvents } from "./apollo/links";
-import { checkVersions } from "./apollo/checkVersions";
+import { initBackend } from './apollo/backend';
 
 /* eslint-disable no-underscore-dangle */
 self.__REMOTEDEV__ = RemoteDev;
@@ -68,22 +66,20 @@ const setupRNDebugger = async message => {
         listen(fn) {
           self.addEventListener("message", evt =>
           {
-            return fn(evt.data);
+            if (evt.data.source === "apollo-devtools-proxy" && evt.data.payload) {
+              return fn(evt.data);
+            }
           });
         },
         send(data) {
-          postMessage(data);
+          postMessage({
+            ...data,
+            source: 'apollo-devtools-backend'
+          });
         },
       });
 
-      if (Number(hook.ApolloClient.version[0]) !== 1) {
-        initLinkEvents(hook, bridge);
-        initBroadCastEvents(hook, bridge);
-      }
-      bridge.log("backend ready.");
-      bridge.send("ready", hook.ApolloClient.version);
-      checkVersions(hook, bridge);
-
+      initBackend(bridge, hook);
     }
 
   }, 1000);

app/worker/apollo/bridge.js

@@ -14,8 +14,8 @@ export default async () => {
     }
     BrowserWindow.addDevToolsExtension(path.resolve('dist/devtools-helper/'));
 
-    BrowserWindow.addDevToolsExtension(path.resolve('../apollo-client-devtools/shells/webextension/'));
   } else {
     BrowserWindow.addDevToolsExtension(path.join(__dirname, 'devtools-helper/'));
   }
+  BrowserWindow.addDevToolsExtension(path.resolve('../apollo-client-devtools/shells/webextension/'));
 };