Instrument Relay on page load

This change instruments Relay as soon as Relay registers itself with the React
devtools. This means that we instrument even if the page is not open, but this
is necessary when we want to inspect GraphQL queries that are made for the
initial page load.

Author: kassens

plugins/Relay/backend.js

@@ -13,18 +13,6 @@
 import type Bridge from '../../agent/Bridge';
 import type Agent from '../../agent/Agent';
 
-import guid from '../../utils/guid';
-
-function decorate(obj, attr, fn) {
-  var old = obj[attr];
-  obj[attr] = function() {
-    var res = old.apply(this, arguments);
-    fn.apply(this, arguments);
-    return res;
-  };
-  return () => (obj[attr] = old);
-}
-
 module.exports = (bridge: Bridge, agent: Agent, hook: Object) => {
   var shouldEnable = !!(
     hook._relayInternals &&
@@ -35,45 +23,14 @@ module.exports = (bridge: Bridge, agent: Agent, hook: Object) => {
   if (!shouldEnable) {
     return;
   }
-  var NetworkLayer = hook._relayInternals.NetworkLayer;
-
-  bridge.send('relay:store', {id: 'relay:store', nodes: hook._relayInternals.DefaultStoreData.getNodeData()});
-  var restore = [
-    decorate(NetworkLayer, 'sendMutation', mut => {
-      var id = guid();
-      bridge.send('relay:pending', [{
-        id,
-        type: 'mutation',
-        start: Date.now(),
-        text: mut.getQueryString(),
-        variables: mut.getVariables(),
-        name: mut.getDebugName(),
-      }]);
-      mut.then(
-        response => bridge.send('relay:success', {id, response: response.response, end: Date.now()}),
-        error => bridge.send('relay:failure', {id, error, end: Date.now()})
-      );
-    }),
+  var {
+    DefaultStoreData,
+    setRequestListener,
+  } = hook._relayInternals;
 
-    decorate(NetworkLayer, 'sendQueries', queries => {
-      bridge.send('relay:pending', queries.map(q => {
-        var id = guid();
-        q.then(
-          response => bridge.send('relay:success', {id, response: response.response, end: Date.now()}),
-          error => bridge.send('relay:failure', {id, error, end: Date.now()})
-        );
-        return {
-          id,
-          type: 'query',
-          start: Date.now(),
-          text: q.getQueryString(),
-          variables: q.getVariables(),
-          name: q.getDebugName(),
-        };
-      }));
-    }),
-  ];
-  hook.on('shutdown', () => {
-    restore.forEach(fn => fn());
+  bridge.send('relay:store', {id: 'relay:store', nodes: DefaultStoreData.getNodeData()});
+  var removeListener = setRequestListener((event, data) => {
+    bridge.send(event, data);
   });
+  hook.on('shutdown', removeListener);
 };

plugins/Relay/installRelayHook.js

@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @flow
+ */
+'use strict';
+
+/**
+ * NOTE: This file cannot `require` any other modules. We `.toString()` the
+ *       function in some places and inject the source into the page.
+ */
+function installRelayHook(window: Object) {
+  var hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (!hook) {
+    return;
+  }
+
+  function decorate(obj, attr, fn) {
+    var old = obj[attr];
+    obj[attr] = function() {
+      var res = old.apply(this, arguments);
+      fn.apply(this, arguments);
+      return res;
+    };
+  }
+
+  var _eventQueue = [];
+  var _listener = null;
+  function emit(name: string, data: mixed) {
+    _eventQueue.push({name, data});
+    if (_listener) {
+      _listener(name, data);
+    }
+  }
+
+  function setRequestListener(
+    listener: (name: string, data: mixed) => void
+  ): () => void {
+    if (_listener) {
+      throw new Error(
+        'Relay Devtools: Called only call setRequestListener once.'
+      );
+    }
+    _listener = listener;
+    _eventQueue.forEach(({name, data}) => {
+      listener(name, data);
+    });
+
+    return () => {
+      _listener = null;
+    };
+  }
+
+  function recordRequest(type: 'mutation' | 'query', request) {
+    var id = Math.random().toString(16).substr(2);
+    request.then(
+      response => {
+        emit('relay:success', {
+          id: id,
+          end: Date.now(),
+          response: response.response,
+        });
+      },
+      error => {
+        emit('relay:failure', {
+          id: id,
+          end: Date.now(),
+          error: error,
+        });
+      },
+    );
+    return {
+      id: id,
+      type: type,
+      start: Date.now(),
+      text: request.getQueryString(),
+      variables: request.getVariables(),
+      name: request.getDebugName(),
+    };
+  }
+
+  function instrumentRelayRequests(relayInternals: Object) {
+    var NetworkLayer = relayInternals.NetworkLayer;
+
+    decorate(NetworkLayer, 'sendMutation', mutation => {
+      emit('relay:pending', [recordRequest('mutation', mutation)]);
+    });
+
+    decorate(NetworkLayer, 'sendQueries', queries => {
+      emit('relay:pending', queries.map(query => recordRequest('query', query)));
+    });
+
+    var instrumented = {};
+    for (var key in relayInternals) {
+      if (relayInternals.hasOwnProperty(key)) {
+        instrumented[key] = relayInternals[key];
+      }
+    }
+    instrumented.setRequestListener = setRequestListener;
+    return instrumented;
+  }
+
+  var _relayInternals = null;
+  Object.defineProperty(hook, '_relayInternals', ({
+    set: function(relayInternals) {
+      _relayInternals = instrumentRelayRequests(relayInternals);
+    },
+    get: function() {
+      return _relayInternals;
+    },
+  }: any));
+}
+
+module.exports = installRelayHook;

shells/chrome/src/GlobalHook.js

@@ -14,6 +14,7 @@
 // devtools are installed (and skip its suggestion to install the devtools).
 
 var installGlobalHook = require('../../../backend/installGlobalHook.js');
+var installRelayHook = require('../../../plugins/Relay/installRelayHook.js');
 
 var saveNativeValues = `
 window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeObjectCreate = Object.create;
@@ -23,7 +24,9 @@ window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeSet = Set;
 `;
 
 var js = (
-  ';(' + installGlobalHook.toString() + '(window))'
+  ';(' + installGlobalHook.toString() + '(window))' +
+  ';(' + installRelayHook.toString() + '(window))' +
+  saveNativeValues
 );
 
 // This script runs before the <head> element is created, so we add the script

shells/plain/container.js

@@ -12,6 +12,7 @@
 
 var React = require('react');
 var installGlobalHook = require('../../backend/installGlobalHook');
+var installRelayHook = require('../../plugins/Relay/installRelayHook');
 
 window.React = React;
 
@@ -24,6 +25,7 @@ var devtoolsSrc = target.getAttribute('data-devtools-src') || './build/backend.j
 
 var win = target.contentWindow;
 installGlobalHook(win);
+installRelayHook(win);
 
 var iframeSrc = document.getElementById('iframe-src');
 if (iframeSrc) {