Apollo Dev tools as Flipper Plugin

[plrdev]

React Native dev tooling is going to Flipper more and more. Flipper seems to have a good plugin system. It would be really nice to have the Apollo dev tools as a flipper plugin. I have no idea how feasible this would be, but would be interested in taking a look at it if this is thought a good idea & someone can help point out to right direction.

[marhaupe]

I agree, I expect most people to make the switch towards Flipper. I can't tell if implementing a plugin is going to be a one person job or not, but if it isn't, I'd gladly help. As far as I can tell, we'd have to develop a react-native-library as well, so maybe we could actually find a way to split the work between multiple contributors

[TheMrZZ]

Yeah, I'd really be glad if that happened!

[twelve17]

@eduplus If you end up getting impatient or get a sense that this might not be done otherwise, I'd be up for looking into it as well.

[plrdev]

Just to say I have no knowledge of how to actually do this, I was hoping there would be someone able to point out the right way to even start doing this. Cool to see there are others interested in helping out as well, I am sure there is enough work for all of us!

One thing to consider: As Apollo Client 3.0 is still in beta, dev tools seems to be going under some major reworking as well. AC3.0 Beta 39 is the last version the dev tools are working right now, with 40+ getting getStore is undefined error. We could use 39 to test for now I guess, but there might be changes coming soon. Not sure whether it would make sense to wait until AC3.0 is out with Dev tools working with it or if there are tasks that could be started already?

[twelve17]

Just to say I have no knowledge of how to actually do this

I'm in the same boat. :)

One thing to consider: As Apollo Client 3.0 is still in beta

This definitely makes me want to wait.

[plrdev]

I started some preliminary work on this during the weekend, but waiting for the dev tools restructure to land before going full steam ahead.

[hsavit1]

I started some preliminary work on this during the weekend, but waiting for the dev tools restructure to land before going full steam ahead.

Any updates? 🙏

[plrdev]

https://github.com/plrdev/react-native-flipper-apollo-devtools here you go for a rough alpha that should have a somewhat working Cache tab. It is based on the old devtools version and not the one under rework. Contributions welcome! After the rework is done, hopefully it is done in a way we can take it into use.

[plrdev]

@marhaupe @TheMrZZ or anyone else wanting to contribute, v0.0.2 is out. There is lots that can be still done though. Most of the work is on the flipper plugin side of things. Apollo devtools were not really built in a way (current version, this new work probably will make it better in this aspect as well) that could easily import them.

How it is done now: Apollo devtools components are copied over to flipper plugin. One issue with the component is that they use less for styling, which flipper plugin doesn't know how to process. I got the cache working converting styles to emotion, which flipper plugin works by default. So one area to help out would be to continue migrating less stylings to emotion. This should go a long way getting the UI ready for the other non-cache tabs. Wiring the data should not be that big of an issue now that it is already hooked to apollo on the client.

If there will be others to contibute, it will also encourage me to work more on this as I can see there is a demand for it, so please, let's make this happen together. I am happy to help you get started if you are not sure how to get going.

[swrobel]

@plrdev very cool, but it seems that 0.0.1 is the latest version you've released, not 0.0.2. Am I missing something?

[hwillson]

Moved to #385 - thanks!

[mohit23x]

Folks, checkout apollo client devtools for react native here 🎉