From b510a6343a8718aec1afd519a89d8a6c95b72c4e Mon Sep 17 00:00:00 2001 From: Alessia Bellisario Date: Thu, 31 Aug 2023 10:51:35 -0400 Subject: [PATCH 1/5] chore: add documentation about polyfills needed to use text streaming in RN --- docs/source/data/defer.mdx | 4 ++++ docs/source/data/directives.mdx | 2 ++ docs/source/data/subscriptions.mdx | 4 +++- docs/source/integrations/react-native.md | 29 ++++++++++++++++++++++++ 4 files changed, 38 insertions(+), 1 deletion(-) diff --git a/docs/source/data/defer.mdx b/docs/source/data/defer.mdx index 914b021ee12..908ada61c6b 100644 --- a/docs/source/data/defer.mdx +++ b/docs/source/data/defer.mdx @@ -79,3 +79,7 @@ For this reason, `@defer` can be thought of as a tool to improve initial renderi ## Using with code generation If you currently use [GraphQL Code Generator](https://www.the-guild.dev/graphql/codegen) for your codegen needs, you'll need to use the Codegen version `4.0.0` or higher. Please refer to the [Codegen documentation](https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#fragment-masking-with-defer-directive) for more information. + +## Usage in React Native + +In order to use `@defer` in a React Native application, additional configuration is required. See the [React Native docs](../integrations/react-native#consuming-multipart-http-via-text-streaming) for more information. diff --git a/docs/source/data/directives.mdx b/docs/source/data/directives.mdx index 5887591b049..80fe5184928 100644 --- a/docs/source/data/directives.mdx +++ b/docs/source/data/directives.mdx @@ -74,6 +74,8 @@ query PersonQuery($personId: ID!) { } ``` +> **Note:** in order to use `@defer` in a React Native application, additional configuration is required. See the [React Native docs](../integrations/react-native#consuming-multipart-http-via-text-streaming) for more information. + For more information about the `@defer` directive, check out the [`@defer` docs](/react/data/defer). ## `@export` diff --git a/docs/source/data/subscriptions.mdx b/docs/source/data/subscriptions.mdx index 8d6043cc64d..c4c177c9784 100644 --- a/docs/source/data/subscriptions.mdx +++ b/docs/source/data/subscriptions.mdx @@ -199,10 +199,12 @@ const wsLink = new GraphQLWsLink(createClient({ Your `GraphQLWsLink` passes the `connectionParams` object to your server whenever it connects. Your server receives the `connectionParams` object and can use it to perform authentication, along with any other connection-related tasks. -## Subscriptions via Multipart HTTP +## Subscriptions via multipart HTTP No additional libraries or configuration are required. Apollo Client adds the required headers to your request when the default terminating `HTTPLink` receives a subscription operation at the `uri` specified when initializing the link or Apollo Client instance. +> **Note:** in order to use subscriptions over multipart HTTP in a React Native application, additional configuration is required. See the [React Native docs](../integrations/react-native#consuming-multipart-http-via-text-streaming) for more information. + ## Executing a subscription You use Apollo Client's `useSubscription` Hook to execute a subscription from React. Like [`useQuery`](./queries/#executing-a-query), `useSubscription` returns an object from Apollo Client that contains `loading`, `error`, and `data` properties you can use to render your UI. diff --git a/docs/source/integrations/react-native.md b/docs/source/integrations/react-native.md index da976e00675..9ce109bc830 100644 --- a/docs/source/integrations/react-native.md +++ b/docs/source/integrations/react-native.md @@ -44,6 +44,35 @@ For more information on setting up Apollo Client, see [Getting started](../get-s 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**. +## Consuming multipart HTTP via text streaming + +By default, React Native ships with a `fetch` implementation built on top of XHR that does not support text streaming. + +For this reason, if you are using *either* [`@defer`](../data/defer) or [subscriptions over multipart HTTP](../data/subscriptions#subscriptions-via-multipart-http)—features that use text streaming to read multipart HTTP responses—there are additional steps you'll need to take to polyfill this functionality. + +1. Install `react-native-fetch-api` and `react-native-polyfill-globals` and save them both as dependencies. +2. In your applications entrypoint (i.e. `index.js`, `App.js` or similar), import the following three polyfille, and call each of the `polyfill*` functions before any application code: +```tsx +import { polyfill as polyfillEncoding } from "react-native-polyfill-globals/src/encoding"; +import { polyfill as polyfillReadableStream } from "react-native-polyfill-globals/src/readable-stream"; +import { polyfill as polyfillFetch } from "react-native-polyfill-globals/src/fetch"; + +polyfillReadableStream(); +polyfillEncoding(); +polyfillFetch(); +``` +1. Finally, there’s a special option we’ll need to pass to our polyfilled `fetch`. Create an `HttpLink` so we can pass the following options in the default `fetchOptions`: +```tsx +const link = new HttpLink({ + uri: "http://localhost:4000/graphql", + fetchOptions: { + reactNative: { textStreaming: true }, + }, +}); +``` + +Now you're ready to use `@defer` and/or multipart subscriptions over HTTP in your React Native app! + ## Troubleshooting * `Uncaught Error: Cannot read property 'prototype' of undefined`, or similar Metro build error when importing from `@apollo/client` From c3d4fd043bbaed8e7fa6ecc1d99693d3445d7182 Mon Sep 17 00:00:00 2001 From: Alessia Bellisario Date: Thu, 31 Aug 2023 11:36:43 -0400 Subject: [PATCH 2/5] chore: add text styling, trigger new deploy preview --- docs/source/data/defer.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/source/data/defer.mdx b/docs/source/data/defer.mdx index 908ada61c6b..598c8759292 100644 --- a/docs/source/data/defer.mdx +++ b/docs/source/data/defer.mdx @@ -82,4 +82,4 @@ If you currently use [GraphQL Code Generator](https://www.the-guild.dev/graphql/ ## Usage in React Native -In order to use `@defer` in a React Native application, additional configuration is required. See the [React Native docs](../integrations/react-native#consuming-multipart-http-via-text-streaming) for more information. +In order to use `@defer` **in a React Native application**, additional configuration is required. See the [React Native docs](../integrations/react-native#consuming-multipart-http-via-text-streaming) for more information. From ff9504612f12603ee389908a0a41c8635da53094 Mon Sep 17 00:00:00 2001 From: Alessia Bellisario Date: Thu, 31 Aug 2023 11:40:04 -0400 Subject: [PATCH 3/5] chore: fix formatting and some typos --- docs/source/integrations/react-native.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/source/integrations/react-native.md b/docs/source/integrations/react-native.md index 9ce109bc830..70e1f7b72ee 100644 --- a/docs/source/integrations/react-native.md +++ b/docs/source/integrations/react-native.md @@ -51,17 +51,17 @@ By default, React Native ships with a `fetch` implementation built on top of XHR For this reason, if you are using *either* [`@defer`](../data/defer) or [subscriptions over multipart HTTP](../data/subscriptions#subscriptions-via-multipart-http)—features that use text streaming to read multipart HTTP responses—there are additional steps you'll need to take to polyfill this functionality. 1. Install `react-native-fetch-api` and `react-native-polyfill-globals` and save them both as dependencies. -2. In your applications entrypoint (i.e. `index.js`, `App.js` or similar), import the following three polyfille, and call each of the `polyfill*` functions before any application code: -```tsx -import { polyfill as polyfillEncoding } from "react-native-polyfill-globals/src/encoding"; -import { polyfill as polyfillReadableStream } from "react-native-polyfill-globals/src/readable-stream"; -import { polyfill as polyfillFetch } from "react-native-polyfill-globals/src/fetch"; - -polyfillReadableStream(); -polyfillEncoding(); -polyfillFetch(); -``` -1. Finally, there’s a special option we’ll need to pass to our polyfilled `fetch`. Create an `HttpLink` so we can pass the following options in the default `fetchOptions`: +2. In your application's entrypoint (i.e. `index.js`, `App.js` or similar), import the following three polyfills and call each of the `polyfill*` functions before any application code: + ```tsx + import { polyfill as polyfillEncoding } from "react-native-polyfill-globals/src/encoding"; + import { polyfill as polyfillReadableStream } from "react-native-polyfill-globals/src/readable-stream"; + import { polyfill as polyfillFetch } from "react-native-polyfill-globals/src/fetch"; + + polyfillReadableStream(); + polyfillEncoding(); + polyfillFetch(); + ``` +3. Finally, there’s a special option we’ll need to pass to our polyfilled `fetch`. Create an `HttpLink` so we can set the following on our default `fetchOptions`: ```tsx const link = new HttpLink({ uri: "http://localhost:4000/graphql", From 4e6d805273d987f694319cc120e11bd0711bff35 Mon Sep 17 00:00:00 2001 From: Alessia Bellisario Date: Thu, 31 Aug 2023 11:56:46 -0400 Subject: [PATCH 4/5] chore: remove text formatting --- docs/source/data/defer.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/source/data/defer.mdx b/docs/source/data/defer.mdx index 598c8759292..908ada61c6b 100644 --- a/docs/source/data/defer.mdx +++ b/docs/source/data/defer.mdx @@ -82,4 +82,4 @@ If you currently use [GraphQL Code Generator](https://www.the-guild.dev/graphql/ ## Usage in React Native -In order to use `@defer` **in a React Native application**, additional configuration is required. See the [React Native docs](../integrations/react-native#consuming-multipart-http-via-text-streaming) for more information. +In order to use `@defer` in a React Native application, additional configuration is required. See the [React Native docs](../integrations/react-native#consuming-multipart-http-via-text-streaming) for more information. From 1e02e2ed3e183b25190fc368c8ffd652c49cf8f0 Mon Sep 17 00:00:00 2001 From: Alessia Bellisario Date: Fri, 1 Sep 2023 14:06:32 -0400 Subject: [PATCH 5/5] chore: add note about Android requests being intercepted during local dev --- docs/source/integrations/react-native.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/source/integrations/react-native.md b/docs/source/integrations/react-native.md index 70e1f7b72ee..eabd1ec6076 100644 --- a/docs/source/integrations/react-native.md +++ b/docs/source/integrations/react-native.md @@ -71,6 +71,8 @@ const link = new HttpLink({ }); ``` +> **Note**: if you're still experiencing issues on Android after adding the polyfills above, there may be a library like Flipper that is intercepting requests during local development. Try commenting out `NetworkFlipperPlugin` in e.g. `android/app/src/debug/java/com//ReactNativeFlipper.java`, or running your app in release mode. + Now you're ready to use `@defer` and/or multipart subscriptions over HTTP in your React Native app! ## Troubleshooting