Skip to content

Commit 54b5d14

Browse files
mohit23xphryneas
andauthored
Update react-native.md - Adds react native devtool supported by flipper (#11364)
Co-authored-by: Lenz Weber-Tronic <lorenz.weber-tronic@apollographql.com>
1 parent dff6acf commit 54b5d14

File tree

2 files changed

+32
-5
lines changed

2 files changed

+32
-5
lines changed

.changeset/fuzzy-eyes-lick.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@apollo/client": patch
3+
---
4+
5+
Update react-native.md - Adds react native devtool in the documentation

docs/source/integrations/react-native.md

+27-5
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,33 @@ For more information on setting up Apollo Client, see [Getting started](../get-s
3838

3939
## Apollo Client Devtools
4040

41-
[React Native Debugger](https://github.com/jhen0409/react-native-debugger) supports the [Apollo Client Devtools](../development-testing/developer-tooling/#apollo-client-devtools):
42-
43-
1. Install React Native Debugger and open it.
44-
2. Enable "Debug JS Remotely" in your app.
45-
3. If you don't see the Developer Tools panel or the Apollo tab is missing from it, toggle the Developer Tools by right-clicking anywhere and selecting **Toggle Developer Tools**.
41+
#### 1. Using [React Native Debugger](https://github.com/jhen0409/react-native-debugger)
42+
43+
The React Native Debugger supports the [Apollo Client Devtools](../development-testing/developer-tooling/#apollo-client-devtools):
44+
45+
1. Install React Native Debugger and open it.
46+
2. Enable "Debug JS Remotely" in your app.
47+
3. If you don't see the Developer Tools panel or the Apollo tab is missing from it, toggle the Developer Tools by right-clicking anywhere and selecting **Toggle Developer Tools**.
48+
49+
#### 2. Using [Flipper](https://fbflipper.com/)
50+
51+
A community plugin called [React Native Apollo devtools](https://github.com/razorpay/react-native-apollo-devtools) is available for Flipper, which supports viewing cache data.
52+
53+
1. Install Flipper and open it.
54+
2. Go to add plugin and search for `react-native-apollo-devtools` and install it
55+
3. Add `react-native-flipper` and `react-native-apollo-devtools-client` as dev dependecy to react native app.
56+
4. Initialize the plugin with flipper on client side
57+
58+
```
59+
import { apolloDevToolsInit } from 'react-native-apollo-devtools-client';
60+
const client = new ApolloClient({
61+
// ...
62+
})
63+
64+
if(__DEV__){
65+
apolloDevToolsInit(client);
66+
}
67+
```
4668
4769
## Consuming multipart HTTP via text streaming
4870

0 commit comments

Comments
 (0)