Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: add documentation about polyfills needed to use text streaming in RN #11187

Merged
merged 8 commits into from
Sep 1, 2023
4 changes: 4 additions & 0 deletions docs/source/data/defer.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
2 changes: 2 additions & 0 deletions docs/source/data/directives.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
4 changes: 3 additions & 1 deletion docs/source/data/subscriptions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
29 changes: 29 additions & 0 deletions docs/source/integrations/react-native.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
Loading