-
-
Notifications
You must be signed in to change notification settings - Fork 812
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Feature request] Add Apollo Dev Tools #177
Comments
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 I was thinking make a flexible interface for add more extensions easier, this may be better way in the future. |
@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 😃 |
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. |
We have new UI changes coming from the new Redux DevTools Extension, the following screenshot is 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:
I'll also mention about the plan in #160. |
Does anyone have any ideas about how to use Apollo Dev Tools with react native, before it lands in the debugger project? |
It looks as though Apollo Dev Tools needs to provide remote support first, before this can be integrated. See apollographql/apollo-client-devtools#6 |
@jhen0409 have you reached out to the apollo team? They may be willing to help if it means better react-native support for apollo. |
Happy new year everyone! @peggyrayzis @jhen0409 Any update for us on this? would be awesome. |
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! |
@jhen0409 would you be able to give me an idea of what the integration would need? |
Would love this! |
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. |
Also need Apollo Devtools. Probably just install as a plugin should be enough? |
I need Apollo Devtools too |
Ditto, I need Apollo Dev Tools to work with RN. |
ditto |
👀 |
@peggyrayzis @jbaxleyiii @jhen0409 any news on this? |
Hi all - here's where things stand with this, from the Apollo side. The Apollo Dev Tools refactoring that was mentioned in #177 (comment) 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! |
What about integrating it with Reactotron? |
@hwillson I'm definitely interested. Can you provide more detail on how this integration might be structured from an Apollo Dev Tools perspective? |
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 ! |
I am copying my message from apollographql/apollo-client-devtools#6 Hey everyone, 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 |
Here are the forks: https://github.com/Gongreg/apollo-client-devtools/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. |
This looks awesome! @Gongreg what do you mean by "checkout both project next to one another"? |
Hey @Samsinite. |
Hey @Samsinite, This is a relevant issue (publish to npm): apollographql/apollo-client-devtools#160 PR Update for apollo dev tools: apollographql/apollo-client-devtools#165 PR To include dev tools in React Native Debugger: #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. :) |
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 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? |
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 |
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 👍 |
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 |
after updating to 0.9.1 I started getting this message. this doesnt happen using chrome devtools |
I'm on expo and no matter how many times I try I can't get the Apollo tab to show up :( |
@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). |
Just tried to use this, works perfectly, but when using |
@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? |
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 |
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". |
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? 😀
The text was updated successfully, but these errors were encountered: