Adding apollo dev tools. #298

Gongreg · 2018-12-13T11:18:45Z

Hey, @jhen0409, I wasn't sure how to get in contact with you to discuss apollo dev tools integration, so I will just open the pull request here.

I wanted to talk with you about how we could do a proper integration.

Currently what I do is I add some apollo code that is waiting to get apollo client in the app inside the worker which runs actual app code.
I also add apollo tab inside dev tools.

I think it could be possible not to leak any apollo code to react native debugger by using importScripts command?

Maybe we could have a chat in slack or discord to fully discuss this thing?

jhen0409 · 2018-12-17T09:22:42Z

Hi, great to see you're trying to implement this!

Initially I hope it will be included in tabs of remotedev-app (#177 (comment)), but currently it looks good to me, I love it to keep simple, included in devtools tab will be more useful.

I just worried about some performance issues for this implementation, we can try improving it in the future.

I think it could be possible not to leak any apollo code to react native debugger by using importScripts command?

If possible, we could try to import the backend bundle, or just install apollo-client-devtools as dependency.

Gongreg · 2018-12-17T09:27:44Z

Hey @jhen0409,
Yea, the timeout trying to get apollo client isn't the best solution, but it is the same implementation in the dev tools themselves. It would be better if the apollo client itself emitted an event, but that would require updating apollo client. Maybe it is a valid feature for the future.

I will take a look how much has to be changed to support apollo dev tools backend out of the box for the debugger.

I hope to get back with some news sometime this week :)

…ools code in the debugger.

…connecting the debugger. Only displays apollo tab if apollo is added inside the project.

Gongreg · 2018-12-18T13:58:21Z

Hey @jhen0409,
I've been looking into things and we should be able to install apollo-client-devtools as dependency. I asked apollo team if they could publish an npm package for it.

This way we will only have to add minimal amount of code inside the react native debugger itself.

Mainly we will have to add code inside app/middlewares/debuggerAPI.js to support communication between apollo devtools and rn webworker and some code inside webworker itself to connect to apollo client in the app itself.

Maybe I will add most of the code in webworker to apollo dev tools themselves, so we could import instead of having it in this project. I will talk about it with someone from apollo team.

Hope to have some more news in next few days

Gongreg · 2019-01-09T10:49:42Z

Hey @jhen0409, I am still waiting from apollo side to publish dev tools as a npm module. When it is published we can move forward.

# Conflicts: # app/middlewares/debuggerAPI.js # app/worker/index.js

…ndow... they have to be separate.

Gongreg · 2019-01-09T21:44:59Z

.eslintrc

@@ -24,7 +24,8 @@
          "__PLATFORM__",
          "__REPORT_REACT_DEVTOOLS_PORT__",
          "__FETCH_SUPPORT__",
-          "__NETWORK_INSPECT__"
+          "__NETWORK_INSPECT__",
+          "__APOLLO_DEVTOOLS_SHOULD_DISPLAY_PANEL__"


Apollo dev tools are not displayed in the chrome dev tools by default.
It tries to check if window.apolloClient is set. Because we don't have apollo client in window (it is in web worker), I've created a separate bool for it.

Gongreg · 2019-01-09T21:46:21Z

app/middlewares/debuggerAPI.js

@@ -32,6 +32,18 @@ let socket;

 const workerOnMessage = message => {
  const { data } = message;
+
+  if (data && data.source === 'apollo-devtools-backend') {


If we get at least one message from apollo backend (the code in the worker) it means that apollo client is being used in the app. So we tell apollo dev tools to display its panel in chrome dev tools.

Also we forward the message from webworker to react native debugger web part.

Gongreg · 2019-01-09T21:47:39Z

app/middlewares/debuggerAPI.js

@@ -43,14 +55,22 @@ const workerOnMessage = message => {
  socket.send(JSON.stringify(data));
 };

+const onWindowMessage = e => {
+  const {data} = e;


if we receive data from panel in web part, we forward the message to the worker. There are some checks for payload, but they are there since apollo dev tools don't strictly follow api for event emitter.

Gongreg · 2019-01-09T21:49:30Z

app/worker/index.js

@@ -51,6 +53,46 @@ const setupRNDebugger = async message => {
    checkAvailableDevMenuMethods(modules, message.networkInspect);
    reportDefaultReactDevToolsPort(modules);
  }
+
+  const interval = setInterval(() => {


Apollo client doesn't have any event emitted when it is set up. To overcome that I just poll the client till it appears.
It is not an optimal approach, but simple polling shouldn't be too much overhead

Gongreg · 2019-01-09T21:50:19Z

app/worker/index.js

+
+      let listener;
+
+      const bridge = new Bridge({


code to forward messages received from post message to event emitter for apollo

Gongreg · 2019-01-09T21:54:02Z

Hey, @jhen0409,
I've cleared up the code and wrote comments about the solution I did.
I am not sure how you feel about the comments in the code itself, if you want to I can add them there.

Now I am just waiting for apollo to publish npm package and answer me one question.

Gongreg · 2019-01-10T09:56:57Z

app/worker/asyncStorage.js

@@ -3,6 +3,24 @@ export const getClearAsyncStorageFn = AsyncStorage => {
  return () => AsyncStorage.clear().catch(f => f);
 };

+export const getSafeAsyncStorage = AsyncStorage => {


Sometimes Async storage throws errors, we want to silence them

Gongreg · 2019-01-10T09:57:33Z

This is a relevant issue in apollo dev tools apollographql/apollo-client-devtools#160
And also a PR apollographql/apollo-client-devtools#165

electron/extensions.js

Gongreg · 2019-01-28T17:43:32Z

@jhen0409, and we are ready to go! All the changes from the apollo team were published.

Could you review the code some time in around?

jhen0409

Looks great, I think it's ready to merge. Thanks!

@Gongreg, I also added you as collaborator.

Gongreg · 2019-01-30T08:38:37Z

Awesome @jhen0409, can you ping me when you release an updated version?

Also thank you for adding me as a collaborator, I will try to help from time to time, since I use this debugger daily and suggest it for everyone else :)

Aleksion · 2019-01-30T23:39:16Z

Would love to see a release of this. I can't get it to work when building from master, so I'm currently stuck :(

jhen0409 · 2019-01-31T05:09:13Z

@Gongreg, OK, I'll comment to apollographql/apollo-client#4386 when it is released. :)

@Aleksion, It seems to electron-rebuild issue, you need to ensure electron-named-image is successfully installed. Otherwise you can try switch electron-v4 branch and merge with master because it doesn't require any rebuild.

Adding apollo dev tools.

Adding apollo.

8d14e45

Gongreg added 2 commits December 18, 2018 00:21

Trying to reduce amount of hacky code, so we could reuse apollo dev t…

8a22e49

…ools code in the debugger.

Successfully connects to devtools even if devtools are started after …

768bcaf

…connecting the debugger. Only displays apollo tab if apollo is added inside the project.

Gongreg mentioned this pull request Dec 21, 2018

Publishing as npm module apollographql/apollo-client-devtools#160

Closed

Gongreg added 5 commits January 9, 2019 22:57

Simplifying post messages.

d918322

Merge remote-tracking branch 'origin/apollo' into apollo

b03ae54

# Conflicts: # app/middlewares/debuggerAPI.js # app/worker/index.js

Removing one of the listeners.

d5253d3

Reverted back listener, didn't see that one is worker and other is wi…

a71c1a5

…ndow... they have to be separate.

Removing apollo code from PR

8730ab2

Gongreg commented Jan 9, 2019

View reviewed changes

Removed unneeded dependencies.

94a6690

Gongreg added 4 commits January 9, 2019 23:55

Reverted yarn.lock

00bf432

Reverted all yarn.locks

7c9083d

Added code to support apollo dev tools check version.

42bf06b

Removed console.log.

1208575

Gongreg commented Jan 10, 2019

View reviewed changes

Gongreg commented Jan 11, 2019

View reviewed changes

electron/extensions.js Outdated Show resolved Hide resolved

This was referenced Jan 11, 2019

[Feature request] Add Apollo Dev Tools #177

Closed

Adding apollo. Gongreg/react-native-debugger#1

Closed

Moving out apollo logic to not clutter worker too much

d5828e4

modosc mentioned this pull request Jan 25, 2019

[Relay] Consider adding the new relay-devtools extension? #145

Open

Gongreg added 2 commits January 26, 2019 00:18

using real apollo dev tools package

4b05639

merge

d2af214

jhen0409 self-requested a review January 27, 2019 12:14

jhen0409 force-pushed the apollo branch from 87bc195 to 3d664cf Compare January 30, 2019 07:02

Add missing apollo-client-devtools dependency to dist/

e81a778

jhen0409 force-pushed the apollo branch from 3d664cf to e81a778 Compare January 30, 2019 07:05

jhen0409 added 2 commits January 30, 2019 15:06

Merge branch 'master' into apollo

d35416d

Fix devtools extension path

57169aa

jhen0409 approved these changes Jan 30, 2019

View reviewed changes

jhen0409 merged commit 1cff81b into jhen0409:master Jan 30, 2019

Gongreg mentioned this pull request Jan 30, 2019

Adding a section about react native debugger support for apollo dev tools apollographql/apollo-client#4386

Merged

danilobuerger mentioned this pull request Feb 1, 2019

0.9.0 IllegalStateException with Apollo on Android #311

Closed

jhen0409 mentioned this pull request Dec 1, 2019

[Experiment] Add xstate-devtools #439

Open

cryptodev523 pushed a commit to cryptodev523/react-native-debugger that referenced this pull request Jan 27, 2022

Merge pull request jhen0409#298 from Gongreg/apollo

ec88ab6

Adding apollo dev tools.

sgrund14 mentioned this pull request Feb 28, 2023

react-native-debugger compatibility warrenday/graphql-network-inspector#84

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding apollo dev tools. #298

Adding apollo dev tools. #298

Gongreg commented Dec 13, 2018

jhen0409 commented Dec 17, 2018

Gongreg commented Dec 17, 2018

Gongreg commented Dec 18, 2018

Gongreg commented Jan 9, 2019 •

edited

Loading

Gongreg Jan 9, 2019

Gongreg Jan 9, 2019

Gongreg Jan 9, 2019

Gongreg Jan 9, 2019

Gongreg Jan 9, 2019

Gongreg commented Jan 9, 2019

Gongreg Jan 10, 2019

Gongreg commented Jan 10, 2019

Gongreg commented Jan 28, 2019

jhen0409 left a comment

Gongreg commented Jan 30, 2019

Aleksion commented Jan 30, 2019

jhen0409 commented Jan 31, 2019

Adding apollo dev tools. #298

Adding apollo dev tools. #298

Conversation

Gongreg commented Dec 13, 2018

jhen0409 commented Dec 17, 2018

Gongreg commented Dec 17, 2018

Gongreg commented Dec 18, 2018

Gongreg commented Jan 9, 2019 • edited Loading

Gongreg Jan 9, 2019

Choose a reason for hiding this comment

Gongreg Jan 9, 2019

Choose a reason for hiding this comment

Gongreg Jan 9, 2019

Choose a reason for hiding this comment

Gongreg Jan 9, 2019

Choose a reason for hiding this comment

Gongreg Jan 9, 2019

Choose a reason for hiding this comment

Gongreg commented Jan 9, 2019

Gongreg Jan 10, 2019

Choose a reason for hiding this comment

Gongreg commented Jan 10, 2019

Gongreg commented Jan 28, 2019

jhen0409 left a comment

Choose a reason for hiding this comment

Gongreg commented Jan 30, 2019

Aleksion commented Jan 30, 2019

jhen0409 commented Jan 31, 2019

Gongreg commented Jan 9, 2019 •

edited

Loading