Apollo Dev tools as Flipper Plugin

[hwillson]

Migrated from: #255

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.

[hsavit1]

I've used the Apollo-dev-tools flipper plugin v0.2 - works decently well as a proof of concept, but viewing queries and mutations do not work, only cache inspection.

Anyway, I'm 100% confident that this would make any mobile developer's life more productive

[tvler]

I think this is a great idea and would benefit the ecosystem a ton

[gentlee]

So what's the status? We need it a lot. If you have reanimated lib in your react-native project you are tied to Flipper and debugging apollo is a real pain.

[Yasir5247]

I think this is a great idea too

[aq1018]

We need an Official version of flipper client. The unofficial version is unmaintained and has many features missing.

We have been a long time Apollo user. We love Apollo Studio and how easy things just work with Apollo. We value Apollo precisely because of the developer friendliness. I happen to believe this is what Apollo believes in as well, developer friendliness.

But things are not as easy and painless here on React Native side. It would be awesome to improve the situation here. More and more companies are moving to React Native and using Flipper as THE Developer Tool for debugging. This is because Flipper is included by default after RN 0.62.

[trymbill]

This is definitely something Apollo should look into and give some serious thought. Having an official plugin in Flipper for Apollo would be a massive sticky point for us to continue working with Apollo in our projects.

[sammarks]

I wonder since Flipper exposes the Hermes Debugger, which is basically just an instance of Chrome DevTools, maybe it would be an "easier" route to somehow install the Apollo DevTools extension into that first rather than having to re-package as a Flipper plugin.

[mohit23x]

Hey folks, presenting you the apollo client devtools as a flipper plugin to support React Native Apps. Check it out here

[declanelcocks]

Looks great @mohit23x 👍

[shubhnik]

Nice work @mohit23x 💯

[mohit23x]

sharing the blog which describes our journey of creating this tool, read it here

[declanelcocks]

@mohit23x after using it for a couple of weeks, my only suggestion would be include some transparency on how queries/mutations are also cached with references.

https://www.apollographql.com/docs/react/caching/advanced-topics/#cache-redirects I was trying to explain to a colleague why we had to add a cache redirect in our app for something not too dissimilar to the Apollo docs (getBooks + getBook(id)). I forget exactly how it's stored in Apollo, but I remember that getBook will be stored with a reference to a specific item in the cache.

Don't get me wrong, the plugin is already great as an intro to Apollo's caching and to have some transparency on what's going on when you make a query, I'm just nitpicking for future enhancements 😄

[mohit23x]

@declanelcocks The cached data shown is query is schema which was cached when the response of that query was resolved, the behaviour is same as that of apollo devtool web plugin.