React-native-debugger: [Feature request] Add Apollo Dev Tools

[peggyrayzis]

Hi there from the @apollographql team! We would love to add support for Apollo Dev Tools into the React Native Debugger. Currently, we are in the process of extracting our dev tools into a standalone app (much like the Redux dev tools) to make this possible.

Do you have any guidance on how to add new extensions to the React Native Debugger? 😀

[jhen0409]

I've plan in #61 but no enough time. Very excited to hear Apollo team is going to make the standalone app! I'll move the old discussion here.

We have to do #160 first because it have tab feature, after that we can consider add the devtools as Apollo tab, then add the client hook in the RNDebuggerWorker. For example, Redux DevTools is send messages via WebWorker.

I was thinking make a flexible interface for add more extensions easier, this may be better way in the future.

[larryranches]

@peggyrayzis @jhen0409 This is great news! I'm currently using graphql with the Apollo client now but have been using React Native with this debugger with a redux setting for quite some time. I'm 100% sure this is the missing piece for React Native with Apollo for the absolute best development experience.

Let me know if I can help out in any way 😃

[blackxored]

This is awesome. I’m literally jealous of web having this and not on native (where arguably is needed the most). 🙏

About tabs: I'm not sure what it means, since I've been out of the loop, but I was able at that point to get it loaded as part of the Chrome devtools. A separate tab would be fine too, specially if more goodies are being brought into it ;)

EDIT #3: 😂 Also happy to help BTW.

[jhen0409]

We have new UI changes coming from the new Redux DevTools Extension, the following screenshot is new-ui branch of remotedev-app (v0.11 beta):

So we can see the tabs on top. In the RNDebugger, it may change to the main function of the app instead of just for Redux DevTools:

• Redux as Actions tab
• RemoteDev as Reports of remotedev if we want to support it
• Apollo tab
• More extensions could add here in the future, maybe move React as well
• Settings as all possible settings of RNDebugger

I'll also mention about the plan in #160.

[mattfysh]

Does anyone have any ideas about how to use Apollo Dev Tools with react native, before it lands in the debugger project?

[mattfysh]

It looks as though Apollo Dev Tools needs to provide remote support first, before this can be integrated. See https://github.com/apollographql/apollo-client-devtools/issues/6

[acomito]

@jhen0409 have you reached out to the apollo team? They may be willing to help if it means better react-native support for apollo.

[larryranches]

Happy new year everyone! @peggyrayzis @jhen0409 Any update for us on this? would be awesome.

[jbaxleyiii]

Hey everyone! I'm nearly done with a large architecture rewrite for the Apollo devtools mirroring projects like Vue and React. Would love to take a look about 1st class support here!

[jbaxleyiii]

@jhen0409 would you be able to give me an idea of what the integration would need?

[acomito]

Would love this!

[brunoreis]

For sure this would be a fantastic tool. Apollo with RN is such a perfect combination that for sure deserves this great debugging. :-) In the meantime, please, if you have a good way to debut a RN app with Apollo client, please share here.

[alexmbp]

Also need Apollo Devtools. Probably just install as a plugin should be enough?

[vdpdev]

I need Apollo Devtools too

[JonathonJulian]

Ditto, I need Apollo Dev Tools to work with RN.

[Jarred-Sumner]

ditto

[wrod7]

👀

[danilobuerger]

@peggyrayzis @jbaxleyiii @jhen0409 any news on this?

[hwillson]

Hi all - here's where things stand with this, from the Apollo side. The Apollo Dev Tools refactoring that was mentioned in https://github.com/jhen0409/react-native-debugger/issues/177#issuecomment-359973030 was completed a while ago. Since then there hasn't been much traction with regards to getting the Apollo Dev Tools built out into either a standalone app, or integrated more closely with this project. The groundwork has been laid to make either approach easier to accomplish now, but there is still some work to do. The Apollo team would love to get the dev tools integrated here, but is a bit caught up in other areas right now. Would anyone in the community be interested in working on this? The Apollo team will definitely try to help out as much as possible. Thanks!

[kumarpatel]

What about integrating it with Reactotron?
https://github.com/apollographql/apollo-client-devtools/issues/122

[lklepner]

@hwillson I'm definitely interested. Can you provide more detail on how this integration might be structured from an Apollo Dev Tools perspective?

[kaiyes]

Would love this to happen but looks like it went into development hell. so much for replacing redux with the shining new apollo-link-state in React Native !

[Gongreg]

I am copying my message from https://github.com/apollographql/apollo-client-devtools/issues/6

Hey everyone,
Amazing news, I just managed to include apollo client devtools inside react-native-debugger. And I've included it without running websockets.

That means we have full functionality support, including graphiql, explorer, running queries and everything.

I will publish my forks tomorrow and try to talk with @jhen0409 on how I should do it properly.

I am really happy to see it working!!

Once again, a low quality gif! https://media.giphy.com/media/47J99DEuzDolu7zKR0/giphy.gif

Twitter allows to upload mp4 file, so there is a small video so it looks better: https://twitter.com/GytisVinclovas/status/1072646494518423553

[Gongreg]

Here are the forks:

https://github.com/Gongreg/apollo-client-devtools/pull/1
https://github.com/Gongreg/react-native-debugger/pull/1

To test it out just checkout both project next to one another, in apollo-client-devtools npm install and npm run chrome, in react-native-debugger run yarn and then run yarn dev:webpack and yarn dev:electron in separate tabs

Finally open devtools in react-native-debugger, switch to apollo tab and start reat native debugger in the react native app itself.

I know that it is a lot of steps but I am hoping to work with @jhen0409 to do a full proper solution.

[Samsinite]

This looks awesome! @Gongreg what do you mean by "checkout both project next to one another"?

[Gongreg]

Hey @samsinite.
What I meant by that is to check out both projects in the same directory. But not that will not work anymore, since today I did more or less final changes necessary to properly release this functionality. Now I am waiting for apollo team to publish npm pckage of apollo dev tools. I don't want to promise any ETA since it doesn't depend on me, but it should be really soon.

[Gongreg]

Hey @Samsinite,
More or less the work from my side is done. Of course something might change after reviewing it but I am more or less happy with how it looks now (I wasn't familiar neither with React Native Debugger nor Apollo dev tools).

This is a relevant issue (publish to npm): https://github.com/apollographql/apollo-client-devtools/issues/160

PR Update for apollo dev tools: https://github.com/apollographql/apollo-client-devtools/pull/165

PR To include dev tools in React Native Debugger: https://github.com/jhen0409/react-native-debugger/pull/298

I really want to release it as fast as soon as possible, I don't like when I have things hanging like that, but my hands are tied moving forward for now. :)

[jhen0409]

We're released v0.9.0 and included this. Thanks to @Gongreg. :)

[bdrobinson]

That's awesome, thank you! This is going to be really useful.

Maybe I'm being stupid but I can't see the apollo devtools tab after updating?

My app uses apollo client and it looks like it is registering window.__APOLLO_CLIENT__ correctly as far as I can see. Do I need to do anything else? Does the "Apollo" tab only appear once the devtools have successfully found the apollo client instance?

Perhaps the issue is just that RN devtools didn't actually successfully update. I tried to confirm that RN devtools definitely did update to 0.9.0 successfully but can't find a way to get it to print out its version number?

[Gongreg]

Hey @bdrobinson, apollo tab is supposed to appear only after the apollo client is instanciated.

Also just close and open the dev tools (not the debugger, but just dev tools). Apollo dev tools have 10 seconds timeout before it stops looking for apollo client.

Notify me if that helps. We will describe it in apollo documentation. And I will try to think of way to remove that 10 second limit

[bdrobinson]

Just to be clear – I need to try closing just the chrome devtools panel (see pic) and then reopening it? If so then Apollo still doesn't seem to be appearing 😕

Perhaps I'll try totally reinstalling RN debugger.

[bdrobinson]

Ok I just saw that 0.9.1 had been released with an apollo bugfix https://github.com/jhen0409/react-native-debugger/commit/ff9c9047de374b20ed8ddcf9aba560fbf0ca6c14 – upgraded to that and the Apollo tab has now appeared. Sweet!

Thanks for the help @Gongreg 👍

[emimuresan]

After upgrading, the Apollo tab didn't show up at first (even after restarts). But after closing then opening the developer tools (View > Toggle Developer Tools) it magically appeared. Thanks for the integration and @Gongreg for the helpful comment! Looking forward to using it 👍

[Gongreg]

Hey. As a temporary approach I am thinking about making apollo panel visible all the time, so the "have you tried turning it off and on again?" Wouldn't be necessary

[wrod7]

after updating to 0.9.1 I started getting this message. this doesnt happen using chrome devtools

[Gongreg]

Hey @wrod7 . It is a known issue, @jhen0409 already pushed a fix. I just don't know when a new version will be released

[arrygoo]

I'm on expo and no matter how many times I try I can't get the Apollo tab to show up :(
@Gongreg What are some steps I can take to debug the issue on my side?

[Gongreg]

@arrygoo, the apollo tab should only appear if you use apollo client >v2 . Also make sure you use latest react native debugger version. Also it appears only after the client is initialized. If you are sure that apollo client is initialized just toggle dev tools twice, since it tries to check for apollo only in the first 10 seconds.

For the debuging purposes you can try to check if self.ApolloClient or something like that exists (I am on mobile, can't check it now, but the chrome console should suggest you).

[rewieer]

Just tried to use this, works perfectly, but when using apollo-link-state typedefs it just spits Error: no value resolved no matter what the typedefs are.

[AndrewMorsillo]

@arrygoo I'm having the same issue with expo. I'm using the aws-appsync apollo client. I can't for the life of me get the apollo tab to show up.

@Gongreg If I evaluate self.__APOLLO_CLIENT__ in the console I get the instance of the client, so it is there. Is it possible that the apollo devtools aren't picking it up because of the aws-appsync wrapper?

[quynhquynh]

I'm having the same problem without seeing the Apollo tab. I have tried closing and opening the dev tools many times but no help. Even start and stop the debugger (though I know we don't need it). I'm using latest version 1.1.0 atm and window.__APOLLO_CLIENT__ is defined. Am I missing something?

[Gongreg]

Hey @quynhquynh, could you open a separate issue and try to give some reproducible use case?

[quynhquynh]

Hey @quynhquynh, could you open a separate issue and try to give some reproducible use case?

Hello, I just tested it again and finally it showed up. I guess no need to open an issue for this. However, still don't know why the magic happened. Btw, it worked after the first "turn it off and on again".