Successfully connects to devtools even if devtools are started after connecting the debugger.

Only displays apollo tab if apollo is added inside the project.

Author: Gongreg

.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

@@ -34,10 +34,14 @@ const workerOnMessage = message => {
   const { data } = message;
 
   if (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__)) {
@@ -53,9 +57,10 @@ const workerOnMessage = message => {
 
 const onWindowMessage = e => {
   if (e.data && e.data.source === 'apollo-devtools-proxy') {
-    worker.postMessage({source: 'apollo-devtools-proxy', event: e.data.payload.event, payload: e.data.payload.payload});
+    const message = typeof e.data.payload === 'string' ? { event: e.data.payload } : e.data.payload;
+    worker.postMessage({ source: 'apollo-devtools-proxy', ...message });
   }
-}
+};
 
 const createJSRuntime = () => {
   // This worker will run the application javascript code,

app/worker/apollo/backend/index.js

@@ -1,28 +1,32 @@
 // 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";
+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;
 
+export const sendBridgeReady = () => {
+  bridge.send('ready', hook.ApolloClient.version);
+};
+
 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);
+  bridge.log('backend ready.');
+  sendBridgeReady();
   checkVersions(hook, bridge);
 };
 
-export const initBackend = (b, h) => {
+export const initBackend = (b, h, uuid) => {
   bridge = b;
   hook = h;
-  connect();
+  connect(uuid);
 };

app/worker/index.js

@@ -18,7 +18,7 @@ import * as RemoteDev from './remotedev';
 import { getRequiredModules, ignoreRNDIntervalSpy } from './utils';
 import { toggleNetworkInspect } from './networkInspect';
 import Bridge from './apollo/bridge';
-import { initBackend } from './apollo/backend';
+import { initBackend, sendBridgeReady } from './apollo/backend';
 
 /* eslint-disable no-underscore-dangle */
 self.__REMOTEDEV__ = RemoteDev;
@@ -59,29 +59,31 @@ const setupRNDebugger = async message => {
       clearInterval(interval);
 
       const hook = {
-        ApolloClient: self.__APOLLO_CLIENT__
+        ApolloClient: self.__APOLLO_CLIENT__,
       };
 
       const bridge = new Bridge({
         listen(fn) {
-          self.addEventListener("message", evt =>
-          {
-            if (evt.data.source === "apollo-devtools-proxy" && evt.data.payload) {
+          self.addEventListener('message', evt => {
+            if (evt.data.source === 'apollo-devtools-proxy') {
               return fn(evt.data);
             }
           });
         },
         send(data) {
           postMessage({
             ...data,
-            source: 'apollo-devtools-backend'
+            source: 'apollo-devtools-backend',
           });
         },
       });
 
+      bridge.on('init', () => {
+        sendBridgeReady();
+      });
+
       initBackend(bridge, hook);
     }
-
   }, 1000);
 };