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..eabd1ec6076 100644 --- a/docs/source/integrations/react-native.md +++ b/docs/source/integrations/react-native.md @@ -44,6 +44,37 @@ 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 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", + fetchOptions: { + reactNative: { textStreaming: true }, + }, +}); +``` + +> **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 * `Uncaught Error: Cannot read property 'prototype' of undefined`, or similar Metro build error when importing from `@apollo/client`