Skip to content

Commit

Permalink
Update react-native.md - Adds react native devtool supported by flipp…
Browse files Browse the repository at this point in the history
…er (#11364)

Co-authored-by: Lenz Weber-Tronic <[email protected]>
  • Loading branch information
mohit23x and phryneas authored Dec 8, 2023
1 parent dff6acf commit 54b5d14
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 5 deletions.
5 changes: 5 additions & 0 deletions .changeset/fuzzy-eyes-lick.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@apollo/client": patch
---

Update react-native.md - Adds react native devtool in the documentation
32 changes: 27 additions & 5 deletions docs/source/integrations/react-native.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,33 @@ For more information on setting up Apollo Client, see [Getting started](../get-s

## Apollo Client Devtools

[React Native Debugger](https://github.com/jhen0409/react-native-debugger) supports the [Apollo Client Devtools](../development-testing/developer-tooling/#apollo-client-devtools):

1. Install React Native Debugger and open it.
2. Enable "Debug JS Remotely" in your app.
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**.
#### 1. Using [React Native Debugger](https://github.com/jhen0409/react-native-debugger)

The React Native Debugger supports the [Apollo Client Devtools](../development-testing/developer-tooling/#apollo-client-devtools):

1. Install React Native Debugger and open it.
2. Enable "Debug JS Remotely" in your app.
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**.

#### 2. Using [Flipper](https://fbflipper.com/)

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.

1. Install Flipper and open it.
2. Go to add plugin and search for `react-native-apollo-devtools` and install it
3. Add `react-native-flipper` and `react-native-apollo-devtools-client` as dev dependecy to react native app.
4. Initialize the plugin with flipper on client side

```
import { apolloDevToolsInit } from 'react-native-apollo-devtools-client';
const client = new ApolloClient({
// ...
})
if(__DEV__){
apolloDevToolsInit(client);
}
```
## Consuming multipart HTTP via text streaming
Expand Down

0 comments on commit 54b5d14

Please sign in to comment.