React-native-debugger: Apollo Client DevTools integration

[blackxored]

Would it be possible to add Apollo devtools to a build? This would come really handy when debugging GraphQL.

[jhen0409]

I just saw https://github.com/apollographql/apollo-client-devtools/issues/6, I'll consider to take time for investigate it.

[faceyspacey]

@jhen0409 any luck with the apollo devtools?

[thebigredgeek]

Any luck?

[faceyspacey]

@jhen0409 just left a note regarding this for you on the corresponding Apollo Issue:

https://github.com/apollographql/apollo-client-devtools/issues/6#issuecomment-305886602

I know you likely view Apollo as less popular and less important than plain Redux, but by incorporating this you basically bring every Apollo + React Native user to your devtools environment. It's really a major missing thing for the Apollo community. I also think having this in your debugger will do a lot to further the graphql movement. To me, it's a crime--because GraphQL shines even better on native mobile than on web. These days I'm building my web apps simpler but my native apps with far more features. I far prefer developing in React Native than for web. And I'm not alone. It's the more important market for serious startups, and it also now has better more seamless tooling thanks to the React Native ecosystem.

So because GraphQL (and Apollo usage) is likely to be far more heavily used in React Native it's even more important that the Apollo Devtools are there. The apollo client and related tools are quiet heavy (in byte size). I don't even like to ship them to web apps. I make my web apps simple enough to just use regular ajax requests. But React Native is all about Apollo. I'm likely not alone. Apollo really shines in native mobile apps. That's why--in one way or another--this needs to happen.

Having made the React Native Debugger package, you're basically one of 2 people best suited for this task (the other person being, the creator of the Apollo Devtools). It would be awesome if you guys could connect. I'm not sure if @stubailo over at Apollo/Meteor made the devtools or if someone else did, but maybe you guys could work together to make this happen.

[jhen0409]

Ideally, I think the followup works might be just these steps if we want to make it into RNDebugger:

1. Replace evalInPage with a function that able to run code in the debugger worker
2. Use worker.addEventListener('message', ...) instead of the listening event of background script (like this)
3. Replace chrome.runtime.sendMessage with worker.postMessage
4. Add the hook into debugger worker.
5. Use apollo-client-devtools components, maybe just npm install apollographql/apollo-client-devtools
6. Finally, consider the implementation of the layout

Just reading the code a bit, but not sure when to do it, so I added help wanted tag first. :)

[larryranches]

Also interested about this. Since react-native-debugger is the go to debugging tool imo especially if your using redux. Would be ideal if Apollo devtools and this module could work together.

[larryranches]

Any update on this? @jhen0409

[jhen0409]

I started using Apollo, maybe I'll start work on this at this month. :)

[faceyspacey]

That is super exciting!!

[larryranches]

@jhen0409 Yes this is great news! How can we help?

[jhen0409]

In addition to https://github.com/jhen0409/react-native-debugger/issues/61#issuecomment-305982790, we may need to upgrade remotedev-app to v0.11 (current beta) first because it have custom tabs UI, I probably will make Apollo Client DevTools as a tab with Redux DevTools together.

[faceyspacey]

That's a very good idea

[larryranches]

@jhen0409 Any update on this feature?

[farzd]

excited about this too

[larryranches]

Right now, I am using this tool to debug apollo with a custom redux store. You can use this tool to view the Apollo store and view any of its actions that it makes when calling a query or mutation.

It doesn't have the full feature rich tooling set like https://github.com/apollographql/apollo-client-devtools has but its better then nothing.

@jhen0409 If we had this full tooling of apollo-client-devtools along with this package (react-native-debugger), it would literally be the greatest thing ever for us React Native devs using Apollo!

[jhen0409]

Move to #177. 🎉