Get rid of data direct dependency in the plugins

client/coral-framework/hocs/index.js

@@ -14,6 +14,10 @@ export { default as withPopupAuthHandler } from './withPopupAuthHandler';
 export { default as withEnumValues } from './withEnumValues';
 export { default as withCombatPassthrough } from './withCombatPassthrough';
 export { default as withSlotElements } from './withSlotElements';
+export { default as withVariables } from './withVariables';
+export { default as WithRefetch } from './withRefetch';
+export { default as withFetchMore } from './withFetchMore';
+export { default as withSubscribeToMore } from './withSubscribeToMore';
 export {
   default as withResendEmailConfirmation,
 } from './withResendEmailConfirmation';

client/coral-framework/hocs/withFetchMore.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import hoistStatics from 'recompose/hoistStatics';
+import { Subscriber } from 'react-broadcast';
+import get from 'lodash/get';
+
+/**
+ * WithFetchMore provides a property `fetchMore` to the wrapped component.
+ * Calling `fetchMore` is the same as calling `data.fetchMore` from the
+ * Apollo React API.
+ */
+export default hoistStatics(WrappedComponent => {
+  class WithFetchMore extends React.Component {
+    render() {
+      return (
+        <Subscriber channel="queryData">
+          {data => (
+            <WrappedComponent
+              {...this.props}
+              fetchMore={get(data, 'fetchMore')}
+            />
+          )}
+        </Subscriber>
+      );
+    }
+  }
+  return WithFetchMore;
+});

client/coral-framework/hocs/withQuery.js

@@ -11,6 +11,8 @@ import { getOperationName } from 'apollo-client/queries/getFromAST';
 import throttle from 'lodash/throttle';
 import get from 'lodash/get';
 import { notify } from 'coral-framework/actions/notification';
+import { Broadcast } from 'react-broadcast';
+import { compose } from 'recompose';
 
 const withSkipOnErrors = reducer => (prev, action, ...rest) => {
   if (
@@ -71,6 +73,15 @@ function networkStatusToString(networkStatus) {
   }
 }
 
+// When wrapped broadcast all data changes to channel "queryData".
+const withBroadcaster = WrappedComponent => props => (
+  /* eslint-disable react/prop-types */
+  <Broadcast channel="queryData" value={props.data}>
+    <WrappedComponent {...props} />
+  </Broadcast>
+  /* eslint-enable react/prop-types */
+);
+
 const createHOC = (document, config, { notifyOnError = true }) =>
   hoistStatics(WrappedComponent => {
     return class WithQuery extends React.Component {
@@ -357,10 +368,13 @@ const createHOC = (document, config, { notifyOnError = true }) =>
         if (!this.memoized) {
           this.resolvedDocument = this.resolveDocument(document);
           this.name = getDefinitionName(this.resolvedDocument);
-          this.memoized = graphql(this.resolvedDocument, {
-            ...this.wrappedConfig,
-            options: this.wrappedOptions,
-          })(WrappedComponent);
+          this.memoized = compose(
+            graphql(this.resolvedDocument, {
+              ...this.wrappedConfig,
+              options: this.wrappedOptions,
+            }),
+            withBroadcaster
+          )(WrappedComponent);
         }
         return this.memoized;
       };

client/coral-framework/hocs/withRefetch.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import hoistStatics from 'recompose/hoistStatics';
+import { Subscriber } from 'react-broadcast';
+import get from 'lodash/get';
+
+/**
+ * WithRefetch provides a property `refetch` to the wrapped component.
+ * Calling refetch will perform a refetch of the parent Query.
+ */
+export default hoistStatics(WrappedComponent => {
+  class WithRefetch extends React.Component {
+    render() {
+      return (
+        <Subscriber channel="queryData">
+          {data => (
+            <WrappedComponent {...this.props} refetch={get(data, 'refetch')} />
+          )}
+        </Subscriber>
+      );
+    }
+  }
+  return WithRefetch;
+});

client/coral-framework/hocs/withSubscribeToMore.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import hoistStatics from 'recompose/hoistStatics';
+import { Subscriber } from 'react-broadcast';
+import get from 'lodash/get';
+
+/**
+ * WithSubscribeToMore provides a property `subscribeToMore` to the wrapped component.
+ * Calling `subscribeToMore` is the same as calling `data.subscribeToMore` from the
+ * Apollo React API.
+ */
+export default hoistStatics(WrappedComponent => {
+  class WithSubscribeToMore extends React.Component {
+    render() {
+      return (
+        <Subscriber channel="queryData">
+          {data => (
+            <WrappedComponent
+              {...this.props}
+              subscribeToMore={get(data, 'subscribeToMoreThrottled')}
+            />
+          )}
+        </Subscriber>
+      );
+    }
+  }
+  return WithSubscribeToMore;
+});

client/coral-framework/hocs/withVariables.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import hoistStatics from 'recompose/hoistStatics';
+import { Subscriber } from 'react-broadcast';
+import get from 'lodash/get';
+
+/**
+ * WithVariables provides a property `variables` to the wrapped component.
+ * These are the variables of the parent Query.
+ */
+export default hoistStatics(WrappedComponent => {
+  class WithVariables extends React.Component {
+    render() {
+      return (
+        <Subscriber channel="queryData">
+          {data => (
+            <WrappedComponent
+              {...this.props}
+              variables={get(data, 'variables')}
+            />
+          )}
+        </Subscriber>
+      );
+    }
+  }
+  return WithVariables;
+});