Add docs/apollo-client-devtools-integration.md

Author: jhen0409

README.md

@@ -8,9 +8,9 @@
 
 This is a standalone app for debugging React Native apps:
 
-* Based on official [Remote Debugger](https://facebook.github.io/react-native/docs/debugging.html#chrome-developer-tools) and provide more functionally.
-* Includes [React Inspector](docs/react-devtools-integration.md) from [`react-devtools-core`](https://github.com/facebook/react-devtools/tree/master/packages/react-devtools-core).
-* Includes Redux DevTools, made [the same API](docs/redux-devtools-integration.md) with [`redux-devtools-extension`](https://github.com/zalmoxisus/redux-devtools-extension).
+- Based on official [Remote Debugger](https://facebook.github.io/react-native/docs/debugging.html#chrome-developer-tools) and provide more functionally.
+- Includes [React Inspector](docs/react-devtools-integration.md) from [`react-devtools-core`](https://github.com/facebook/react-devtools/tree/master/packages/react-devtools-core).
+- Includes Redux DevTools, made [the same API](docs/redux-devtools-integration.md) with [`redux-devtools-extension`](https://github.com/zalmoxisus/redux-devtools-extension).
 
 ## Installation
 
@@ -26,21 +26,22 @@ This puts `React Native Debugger.app` in your `/applications/` folder.
 
 ## Documentation
 
-* [Getting Started](docs/getting-started.md)
-* [Debugger Integration](docs/debugger-integration.md)
-* [React DevTools Integration](docs/react-devtools-integration.md)
-* [Redux DevTools Integration](docs/redux-devtools-integration.md)
-* [Shortcut references](docs/shortcut-references.md)
-* [Network inspect of Chrome Developer Tools](docs/network-inspect-of-chrome-devtools.md)
-* [Enable open in editor in console](docs/enable-open-in-editor-in-console.md)
-* [Config file in home directory](docs/config-file-in-home-directory.md)
-* [Troubleshooting](docs/troubleshooting.md)
-* [Contributing](docs/contributing.md)
+- [Getting Started](docs/getting-started.md)
+- [Debugger Integration](docs/debugger-integration.md)
+- [React DevTools Integration](docs/react-devtools-integration.md)
+- [Redux DevTools Integration](docs/redux-devtools-integration.md)
+- [Apollo Client DevTools Integration](docs/apollo-client-devtools-integration.md)
+- [Shortcut references](docs/shortcut-references.md)
+- [Network inspect of Chrome Developer Tools](docs/network-inspect-of-chrome-devtools.md)
+- [Enable open in editor in console](docs/enable-open-in-editor-in-console.md)
+- [Config file in home directory](docs/config-file-in-home-directory.md)
+- [Troubleshooting](docs/troubleshooting.md)
+- [Contributing](docs/contributing.md)
 
 ## Credits
 
-* Great work of [React DevTools](https://github.com/facebook/react-devtools)
-* Great work of [Redux DevTools](https://github.com/gaearon/redux-devtools) / [Remote Redux DevTools](https://github.com/zalmoxisus/remote-redux-devtools) and all third-party monitors.
+- Great work of [React DevTools](https://github.com/facebook/react-devtools)
+- Great work of [Redux DevTools](https://github.com/gaearon/redux-devtools) / [Remote Redux DevTools](https://github.com/zalmoxisus/remote-redux-devtools) and all third-party monitors.
 
 ## Backers
 

app/middlewares/debuggerAPI.js

@@ -41,10 +41,13 @@ const workerOnMessage = message => {
       window.__APOLLO_DEVTOOLS_SHOULD_DISPLAY_PANEL__ = true;
     }
 
-    postMessage({
-      source: APOLLO_BACKEND,
-      payload: data,
-    }, '*');
+    postMessage(
+      {
+        source: APOLLO_BACKEND,
+        payload: data,
+      },
+      '*'
+    );
   }
 
   if (data && (data.__IS_REDUX_NATIVE_MESSAGE__ || data.__REPORT_REACT_DEVTOOLS_PORT__)) {

docs/README.md

@@ -4,6 +4,7 @@
 - [Debugger Integration](debugger-integration.md)
 - [React DevTools Integration](react-devtools-integration.md)
 - [Redux DevTools Integration](redux-devtools-integration.md)
+- [Apollo Client DevTools Integration](apollo-client-devtools-integration.md)
 - [Shortcuts references](shortcut-references.md)
 - [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)
 - [Enable open in editor in console](enable-open-in-editor-in-console.md)

docs/apollo-client-devtools-integration.md

@@ -0,0 +1,20 @@
+# Apollo Client DevTools Integration
+
+We have integrated for the [Apollo Client DevTools](https://github.com/apollographql/apollo-client-devtools) Chrome Extension, you can see the `Apollo` tab in Chrome Developer Tools:
+
+<img width="547" alt="screen shot 2019-02-01 at 1 51 27 pm" src="https://user-images.githubusercontent.com/3001525/52105143-8006fe00-2628-11e9-8276-09bdeb23e3b2.png">
+
+For ensure it works, you must use Apollo Client ^2.0. (See [the documentation](https://github.com/apollographql/apollo-client-devtools#apollo-client-devtools))
+
+## Other documentations
+
+- [Getting Started](getting-started.md)
+- [Debugger Integration](debugger-integration.md)
+- [React DevTools Integration](react-devtools-integration.md)
+- [Redux DevTools Integration](redux-devtools-integration.md)
+- [Shortcut references](shortcut-references.md)
+- [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)
+- [Enable open in editor in console](enable-open-in-editor-in-console.md)
+- [Config file in home directory](config-file-in-home-directory.md)
+- [Troubleshooting](troubleshooting.md)
+- [Contributing](contributing.md)

docs/config-file-in-home-directory.md

@@ -50,6 +50,7 @@ We could configure RNDebugger app in `~/.rndebuggerrc`, the file used [json5](ht
 - [Debugger Integration](debugger-integration.md)
 - [React DevTools Integration](react-devtools-integration.md)
 - [Redux DevTools Integration](redux-devtools-integration.md)
+- [Apollo Client DevTools Integration](apollo-client-devtools-integration.md)
 - [Shortcut references](shortcut-references.md)
 - [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)
 - [Enable open in editor in console](enable-open-in-editor-in-console.md)

docs/contributing.md

@@ -82,6 +82,7 @@ Thank you to all our sponsors! (please ask your company to also support this ope
 - [Debugger Integration](debugger-integration.md)
 - [React DevTools Integration](react-devtools-integration.md)
 - [Redux DevTools Integration](redux-devtools-integration.md)
+- [Apollo Client DevTools Integration](apollo-client-devtools-integration.md)
 - [Shortcut references](shortcut-references.md)
 - [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)
 - [Enable open in editor in console](enable-open-in-editor-in-console.md)

docs/debugger-integration.md

@@ -47,6 +47,7 @@ if (__DEV__) {
 - [Getting Started](getting-started.md)
 - [React DevTools Integration](react-devtools-integration.md)
 - [Redux DevTools Integration](redux-devtools-integration.md)
+- [Apollo Client DevTools Integration](apollo-client-devtools-integration.md)
 - [Shortcut references](shortcut-references.md)
 - [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)
 - [Enable open in editor in console](enable-open-in-editor-in-console.md)

docs/enable-open-in-editor-in-console.md

@@ -16,6 +16,7 @@ Instead of open file in `Sources` tab, you can open file in editor by click sour
 - [Debugger Integration](debugger-integration.md)
 - [React DevTools Integration](react-devtools-integration.md)
 - [Redux DevTools Integration](redux-devtools-integration.md)
+- [Apollo Client DevTools Integration](apollo-client-devtools-integration.md)
 - [Shortcut references](shortcut-references.md)
 - [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)
 - [Config file in home directory](config-file-in-home-directory.md)

docs/getting-started.md

@@ -1,6 +1,7 @@
 # Getting Started
 
 Just these steps will let you start RNDebugger out of box:
+
 - Install the latest version ([download page](https://github.com/jhen0409/react-native-debugger/releases)).
 - Make sure all debugger clients of React Native are closed, usually are `http://localhost:<port>/debugger-ui`
 - Make sure RNDebugger is open and wait state.
@@ -55,8 +56,8 @@ Using the same API as [`redux-devtools-extension`](https://github.com/zalmoxisus
 ```js
 const store = createStore(
   reducer /* preloadedState, */,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-);
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
+)
 ```
 
 See [`Redux DevTools Integration`](redux-devtools-integration.md) section for more information.
@@ -85,6 +86,7 @@ You can also click `React Native Debugger` (`RND` for Linux / Windows) -> `Check
 - [Debugger Integration](debugger-integration.md)
 - [React DevTools Integration](react-devtools-integration.md)
 - [Redux DevTools Integration](redux-devtools-integration.md)
+- [Apollo Client DevTools Integration](apollo-client-devtools-integration.md)
 - [Shortcut references](shortcut-references.md)
 - [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)
 - [Enable open in editor in console](enable-open-in-editor-in-console.md)

docs/network-inspect-of-chrome-devtools.md

@@ -58,6 +58,7 @@ If you want to inspect deeper network requests (like requests made with `Image`)
 - [Debugger Integration](debugger-integration.md)
 - [React DevTools Integration](react-devtools-integration.md)
 - [Redux DevTools Integration](redux-devtools-integration.md)
+- [Apollo Client DevTools Integration](apollo-client-devtools-integration.md)
 - [Shortcut references](shortcut-references.md)
 - [Enable open in editor in console](enable-open-in-editor-in-console.md)
 - [Config file in home directory](config-file-in-home-directory.md)