Adding apollo.

Author: Gongreg

app/middlewares/debuggerAPI.js

@@ -32,6 +32,15 @@ let socket;
 
 const workerOnMessage = message => {
   const { data } = message;
+
+  if (data.APOLLO_MESSAGE) {
+    postMessage({
+      event: data.event,
+      payload: data,
+      source: 'apollo-devtools-backend',
+    }, "*");
+  }
+
   if (data && (data.__IS_REDUX_NATIVE_MESSAGE__ || data.__REPORT_REACT_DEVTOOLS_PORT__)) {
     return true;
   }
@@ -43,14 +52,20 @@ const workerOnMessage = message => {
   socket.send(JSON.stringify(data));
 };
 
+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 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 +74,7 @@ const shutdownJSRuntime = () => {
   scriptExecuted = false;
   if (worker) {
     worker.terminate();
+    window.removeEventListener('messsage', onWindowMessage);
     setDevMenuMethods([]);
   }
   worker = null;

app/worker/apollo/bridge.js

@@ -0,0 +1,33 @@
+import { EventEmitter } from "events";
+
+export default class Bridge extends EventEmitter {
+  constructor(wall) {
+    super();
+    // Setting `this` to `self` here to fix an error in the Safari build:
+    // ReferenceError: Cannot access uninitialized variable.
+    // The error might be related to the webkit bug here:
+    // https://bugs.webkit.org/show_bug.cgi?id=171543
+    const self = this;
+    self.setMaxListeners(Infinity);
+    self.wall = wall;
+    wall.listen(message => {
+      if (typeof message === "string") {
+        self.emit(message);
+      } else {
+        self.emit(message.event, message.payload);
+      }
+    });
+  }
+
+  send(event, payload) {
+    this.wall.send({
+      APOLLO_MESSAGE: true,
+      event,
+      payload,
+    });
+  }
+
+  log(message) {
+    this.send("log", message);
+  }
+}

app/worker/apollo/broadcastQueries.js

@@ -0,0 +1,32 @@
+export const initBroadCastEvents = (hook, bridge) => {
+  let logger = ({
+    state: { queries, mutations },
+    // XXX replace with universal store format compat way of this
+    dataWithOptimisticResults: inspector,
+  }) => {
+    bridge.send(
+      "broadcast:new",
+      JSON.stringify({
+        queries,
+        mutations,
+        inspector,
+      }),
+    );
+  };
+
+  bridge.on("panel:ready", () => {
+    const client = hook.ApolloClient;
+    const initial = {
+      queries: client.queryManager
+        ? client.queryManager.queryStore.getStore()
+        : {},
+      mutations: client.queryManager
+        ? client.queryManager.mutationStore.getStore()
+        : {},
+      inspector: client.cache.extract(true),
+    };
+    bridge.send("broadcast:new", JSON.stringify(initial));
+  });
+
+  hook.ApolloClient.__actionHookForDevTools(logger);
+};

app/worker/apollo/checkVersions.js

@@ -0,0 +1,53 @@
+import genUuid from "uuid/v1";
+
+export const checkVersions = async (hook, bridge) => {
+  const uuid = genUuid();
+
+  const { version } = hook.ApolloClient;
+  const { devToolsVersion } = hook;
+
+  if (!devToolsVersion) return;
+  const graphQLParams = {
+    query: `
+    query CompatibilityMessages(
+      $uuid: String
+      $devToolsVersion: String!
+      $versions: [VersionInput]
+    ) {
+      compatibilityMessages(
+        uuid: $uuid,
+        devToolsVersion: $devToolsVersion,
+        versions: $versions
+      ) {
+        message
+      }
+    }
+  `,
+    variables: {
+      uuid,
+      devToolsVersion,
+      versions: [{ packageName: "apollo-client", version }],
+    },
+  };
+
+  fetch("https://devtools.apollodata.com/graphql", {
+    method: "post",
+    mode: "cors",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(graphQLParams),
+  })
+    .then(function(response) {
+      return response.json();
+    })
+    .then(function(response) {
+      if (!response.data.compatibilityMessages) return;
+      response.data.compatibilityMessages.forEach(cm => {
+        bridge.send(
+          `console.info('Apollo devtools message:', "${cm.message}")`,
+        );
+      });
+    });
+};

app/worker/apollo/links.js

@@ -0,0 +1,112 @@
+import { execute, ApolloLink, Observable, from } from "apollo-link";
+import { getQueryDefinition } from "apollo-utilities";
+import gql from "graphql-tag";
+
+/*
+ *
+ * supports dynamic client schemas set on the context
+ *
+ * schemas must be an array of the following shape
+ *
+      {
+        definition: schemaString,
+        directives: `directive @client on FIELD`,
+      }
+ *
+ */
+const apolloClientSchema = {
+  directives: "directive @connection(key: String!, filter: [String]) on FIELD",
+};
+const schemaLink = () =>
+  new ApolloLink((operation, forward) => {
+    return forward(operation).map(result => {
+      let { schemas = [] } = operation.getContext();
+      result.extensions = Object.assign({}, result.extensions, {
+        schemas: schemas.concat([apolloClientSchema]),
+      });
+      return result;
+    });
+  });
+
+// forward all "errors" to next with a good shape for graphiql
+const errorLink = () =>
+  new ApolloLink((operation, forward) => {
+    return new Observable(observer => {
+      let sub;
+      try {
+        sub = forward(operation).subscribe({
+          next: observer.next.bind(observer),
+          error: networkError =>
+            observer.next({
+              errors: [
+                {
+                  message: networkError.message,
+                  locations: [networkError.stack],
+                },
+              ],
+            }),
+          complete: observer.complete.bind(observer),
+        });
+      } catch (e) {
+        observer.next({
+          errors: [{ message: e.message, locations: [e.stack] }],
+        });
+      }
+
+      return () => {
+        if (sub) sub.unsubscribe();
+      };
+    });
+  });
+
+const cacheLink = fetchPolicy =>
+  new ApolloLink((operation, forward) => {
+    // XXX how do we handle local state here? It *should* still work right?
+    if (fetchPolicy === "no-cache") return forward(operation);
+
+    const { cache } = operation.getContext();
+    const { variables, query } = operation;
+    // quick check if this is a query
+    try {
+      const def = getQueryDefinition(query);
+      const results = cache.readQuery({ query, variables });
+      if (results) return Observable.of({ data: results });
+    } catch (e) {}
+
+    return forward(operation);
+  });
+
+export const initLinkEvents = (hook, bridge) => {
+  // handle incoming requests
+  const subscriber = request => {
+    const { query, variables, operationName, key, fetchPolicy } = JSON.parse(
+      request,
+    );
+    try {
+      const userLink = hook.ApolloClient.link;
+      const cache = hook.ApolloClient.cache;
+
+      const devtoolsLink = from([
+        errorLink(),
+        cacheLink(fetchPolicy),
+        schemaLink(),
+        userLink,
+      ]);
+      const obs = execute(devtoolsLink, {
+        query: gql(query),
+        variables,
+        operationName,
+        context: { __devtools_key__: key, cache },
+      });
+      obs.subscribe({
+        next: data => bridge.send(`link:next:${key}`, JSON.stringify(data)),
+        error: err => bridge.send(`link:error:${key}`, JSON.stringify(err)),
+        complete: () => bridge.send(`link:complete:${key}`),
+      });
+    } catch (e) {
+      bridge.send(`link:error:${key}`, JSON.stringify(e));
+    }
+  };
+
+  bridge.on("link:operation", subscriber);
+};

app/worker/index.js

@@ -17,6 +17,10 @@ import devToolsEnhancer, { composeWithDevTools } from './reduxAPI';
 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";
 
 /* eslint-disable no-underscore-dangle */
 self.__REMOTEDEV__ = RemoteDev;
@@ -51,6 +55,38 @@ const setupRNDebugger = async message => {
     checkAvailableDevMenuMethods(modules, message.networkInspect);
     reportDefaultReactDevToolsPort(modules);
   }
+
+  const interval = setInterval(() => {
+    if (self.__APOLLO_CLIENT__) {
+      clearInterval(interval);
+
+      const hook = {
+        ApolloClient: self.__APOLLO_CLIENT__
+      };
+
+      const bridge = new Bridge({
+        listen(fn) {
+          self.addEventListener("message", evt =>
+          {
+            return fn(evt.data);
+          });
+        },
+        send(data) {
+          postMessage(data);
+        },
+      });
+
+      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);
+
+    }
+
+  }, 1000);
 };
 
 const messageHandlers = {
@@ -66,6 +102,7 @@ const messageHandlers = {
     } catch (err) {
       error = err.message;
     }
+
     sendReply(null /* result */, error);
 
     if (!error) {