docs: update subscribeToMore for getDerivedStateFromProps (#3680)

* docs: update subscribeToMore for getDerivedStateFromProps * Slight formatting tweaks; Changelog update
apollographql · Aug 17, 2018 · 405a8f6 · 405a8f6
1 parent cf5c440
commit 405a8f6
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,7 +19,8 @@
   [@pschreibs85](https://github.com/pschreibs85) in [#3812](https://github.com/apollographql/apollo-client/pull/3812)  <br/>
   [@msreekm](https://github.com/msreekm) in [#3808](https://github.com/apollographql/apollo-client/pull/3808)  <br/>
   [@kamaltmo](https://github.com/kamaltmo) in [#3806](https://github.com/apollographql/apollo-client/pull/3806)  <br/>
-  [@lorensr](https://github.com/lorensr) in [#3739](https://github.com/apollographql/apollo-client/pull/3739)
+  [@lorensr](https://github.com/lorensr) in [#3739](https://github.com/apollographql/apollo-client/pull/3739)  <br/>
+  [@brainkim](https://github.com/brainkim) in [#3680](https://github.com/apollographql/apollo-client/pull/3680)
 
 ### Apollo Cache In-Memory (vNext)
 

diff --git a/docs/source/api/react-apollo.md b/docs/source/api/react-apollo.md
@@ -702,7 +702,7 @@ This function will set up a subscription, triggering updates whenever the server
 
 This function returns an `unsubscribe` function handler which can be used to unsubscribe later.
 
-A common practice is to wrap the `subscribeToMore` call within `componentWillReceiveProps` and perform the subscription after the original query has completed. To ensure the subscription isn't created multiple times, you can attach it to the component instance. See the example for more details.
+A common practice is to wrap the `subscribeToMore` call within `getDerivedStateFromProps` and perform the subscription after the original query has completed. To ensure the subscription isn't created multiple times, you can add it to component state. See the example for more details.
 
 - `[document]`: Document is a required property that accepts a GraphQL subscription created with `graphql-tag`’s `gql` template string tag. It should contain a single GraphQL subscription operation with the data that will be returned.
 - `[variables]`: The optional variables you may provide that will be used with the `document` option.
@@ -715,35 +715,48 @@ In order to update the query's store with the result of the subscription, you mu
 
 ```js
 class SubscriptionComponent extends Component {
-  componentWillReceiveProps(nextProps) {
-    if(!nextProps.data.loading) {
+  state = {
+    subscriptionParam: null,
+    unsubscribe: null,
+  };
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (!nextProps.data.loading) {
       // Check for existing subscription
-      if (this.unsubscribe) {
-        // Check if props have changed and, if necessary, stop the subscription
-        if (this.props.subscriptionParam !== nextProps.subscriptionParam) {
-          this.unsubscribe();
-        } else {
-          return;
+      if (prevState.unsubscribe) {
+        // Only unsubscribe/update state if subscription variable has changed
+        if (prevState.subscriptionParam === nextProps.subscriptionParam) {
+          return null;
         }
+        prevState.unsubscribe();
       }
 
-      // Subscribe
-      this.unsubscribe = nextProps.data.subscribeToMore({
-        document: gql`subscription {...}`,
-        updateQuery: (previousResult, { subscriptionData, variables }) => {
-          // Perform updates on previousResult with subscriptionData
-          return updatedResult;
-        }
-      });
+      return {
+        // Subscribe
+        unsubscribe: nextProps.data.subscribeToMore({
+          document: gql`subscription {...}`,
+          variables: {
+            param: nextProps.subscriptionParam,
+          },
+          updateQuery: (previousResult, { subscriptionData, variables }) => {
+            // Perform updates on previousResult with subscriptionData
+            return updatedResult;
+          },
+        }),
+        // Store subscriptionParam in state for next update
+        subscriptionParam: nextProps.subscriptionParam,
+      };
     }
+
+    return null;
   }
+
   render() {
     ...
   }
 }
 ```
 
-
 <h3 id="graphql-query-data-startPolling">`data.startPolling(interval)`</h3>
 
 This function will set up an interval and send a fetch request every time that interval ellapses. The function takes only one integer argument which allows you to configure how often you want your query to be executed in milliseconds. In other words, the `interval` argument represents the milliseconds between polls.