From 865659b879dc1458812df6718fdeb72f211ad496 Mon Sep 17 00:00:00 2001 From: Mohit <36567063+mohit23x@users.noreply.github.com> Date: Fri, 8 Dec 2023 19:14:09 +0530 Subject: [PATCH] Update react-native.md - Adds react native devtool supported by flipper (#11364) Co-authored-by: Lenz Weber-Tronic --- .changeset/fuzzy-eyes-lick.md | 5 ++++ docs/source/integrations/react-native.md | 32 ++++++++++++++++++++---- 2 files changed, 32 insertions(+), 5 deletions(-) create mode 100644 .changeset/fuzzy-eyes-lick.md diff --git a/.changeset/fuzzy-eyes-lick.md b/.changeset/fuzzy-eyes-lick.md new file mode 100644 index 00000000000..c69c857fd51 --- /dev/null +++ b/.changeset/fuzzy-eyes-lick.md @@ -0,0 +1,5 @@ +--- +"@apollo/client": patch +--- + +Update react-native.md - Adds react native devtool in the documentation diff --git a/docs/source/integrations/react-native.md b/docs/source/integrations/react-native.md index 68dfdd23bf6..b98605641d9 100644 --- a/docs/source/integrations/react-native.md +++ b/docs/source/integrations/react-native.md @@ -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