From 0ed88b607c64582125e188342c6c4b73587f64b0 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Thu, 12 Jul 2018 16:53:13 -0400 Subject: [PATCH 1/2] docs: update subscribeToMore for getDerivedStateFromProps --- docs/source/api/react-apollo.md | 44 +++++++++++++++++++++------------ 1 file changed, 28 insertions(+), 16 deletions(-) diff --git a/docs/source/api/react-apollo.md b/docs/source/api/react-apollo.md index 3ca2cf3f0dc..a83405cb916 100644 --- a/docs/source/api/react-apollo.md +++ b/docs/source/api/react-apollo.md @@ -700,7 +700,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. @@ -713,28 +713,40 @@ In order to update the query's store with the result of the subscription, you mu ```js class SubscriptionComponent extends Component { - componentWillReceiveProps(nextProps) { + 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() { ... } From c73079ce5b4701f8d5359f08cf3a707fe9c7e68b Mon Sep 17 00:00:00 2001 From: Hugh Willson Date: Fri, 17 Aug 2018 06:04:43 -0400 Subject: [PATCH 2/2] Slight formatting tweaks; Changelog update --- CHANGELOG.md | 3 ++- docs/source/api/react-apollo.md | 7 ++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f859afc4eff..7b8ac0a1ebb 100644 --- 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)
[@msreekm](https://github.com/msreekm) in [#3808](https://github.com/apollographql/apollo-client/pull/3808)
[@kamaltmo](https://github.com/kamaltmo) in [#3806](https://github.com/apollographql/apollo-client/pull/3806)
- [@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)
+ [@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 index e2bd6371b12..70af5d7e46f 100644 --- a/docs/source/api/react-apollo.md +++ b/docs/source/api/react-apollo.md @@ -721,7 +721,7 @@ class SubscriptionComponent extends Component { }; static getDerivedStateFromProps(nextProps, prevState) { - if(!nextProps.data.loading) { + if (!nextProps.data.loading) { // Check for existing subscription if (prevState.unsubscribe) { // Only unsubscribe/update state if subscription variable has changed @@ -735,7 +735,9 @@ class SubscriptionComponent extends Component { // Subscribe unsubscribe: nextProps.data.subscribeToMore({ document: gql`subscription {...}`, - variables: { param: nextProps.subscriptionParam, }, + variables: { + param: nextProps.subscriptionParam, + }, updateQuery: (previousResult, { subscriptionData, variables }) => { // Perform updates on previousResult with subscriptionData return updatedResult; @@ -755,7 +757,6 @@ class SubscriptionComponent extends Component { } ``` -

`data.startPolling(interval)`

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.