🚀 React Native Apollo Devtools

Flipper plugin to visualise apollo client cache, queries and mutations for React Native.

This plugin offers feature parity with the official devtool for React Native since the official apollo client devtool only supports web platform and does not supports React Native.

Read more about it in our blog post here.

Devtools in action with the Ricky and Morty GraphQL API based react native sample app

📱 Setting up mobile app

1. Install dependecies

yarn add -D react-native-apollo-devtools-client

yarn add -D react-native-flipper

2. Initialize the plugin with apollo client

import { apolloDevToolsInit } from 'react-native-apollo-devtools-client';

const client = new ApolloClient({
    // ...
})

if(__DEV__){
    apolloDevToolsInit(client);
}

🖥️ Setting up Flipper

1. Install Flipper in your machine, and make sure the emulator/device is recognized by flipper by setting up proper SDK path in flipper settings.

2. Go to plugins manager -> install plugin -> search react-native-apollo and install the plugin named react-native-apollo-devtools

3. Restart Flipper

4. Launch the mobile app and you should see Apollo Devtools in the list of plugin in disable section, Click + icon to enable it 🎉

⭐ Stargazers

📝 License

Licensed under the MIT License.

Link to our Code of Conduct