Docs: Add subscription network config example
Summary:
Resolves
Related issue and comment:
Pull Request resolved:
@@ -6,7 +6,7 @@ title: Subscriptions
Relay exposes the following APIs to create subscriptions.
```javascript
-const {requestSubscription} = require('react-relay');
+import { requestSubscription } from 'react-relay';
type Variables = {[name: string]: any};
@@ -52,10 +52,10 @@ appropriate when you are only changing the properties of existing records that
can be identified by their `id`:
```javascript
-const {
+import {
requestSubscription,
graphql,
-} = require('react-relay');
+} from 'react-relay';
const subscription = graphql`
subscription MarkReadNotificationSubscription(
@@ -85,6 +85,39 @@ requestSubscription(
);
```
+# Configure Network
+
+You will need to Configure your [Network](./networklayer) to handle subscriptions. The below example uses [subscriptions-transport-ws](https://github.com/apollographql/subscriptions-transport-ws):
+
+```javascript
+import {
+ ...
+ Network,
+ Observable
+} from 'relay-runtime';
+import { SubscriptionClient } from 'subscriptions-transport-ws';
+
+...
+
+const subscriptionClient = new SubscriptionClient('ws://localhost:3000', {
+ reconnect: true,
+});
+
+const subscribe = (request, variables) => {
+ const subscribeObservable = subscriptionClient.request({
+ query: request.text,
+ operationName: request.name,
+ variables,
+ });
+ // Important: Convert subscriptions-transport-ws observable type to Relay's
+ return Observable.from(subscribeObservable);
+};
+
+const network = Network.create(fetchQuery, subscribe);
+
+...
+```
+
# Updating the client on each response
For more complex use-cases, you may wish to perform custom logic to update
@@ -92,7 +125,7 @@ Relay's in-memory cache when each subscription response is received. To do so,
pass an `updater` function:
```javascript
-const {ConnectionHandler} = require('relay-runtime');
+import { ConnectionHandler } from 'relay-runtime';
requestSubscription(
environment,
