Skip to content

razorpay/react-native-apollo-devtools

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🚀 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.

image

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
  1. 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 🎉

Untitled-2022-10-11-1036

⭐ Stargazers

Stargazers repo roster for @razorpay/react-native-apollo-devtools

📝 License

Licensed under the MIT License.

Link to our Code of Conduct

About

Flipper plugin to debug apollo client cache for React Native

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •