Introduce separateDataAndRoot

client/coral-embed-stream/src/containers/Embed.js

@@ -6,7 +6,7 @@ import isEqual from 'lodash/isEqual';
 
 import {Spinner} from 'coral-ui';
 import {authActions, assetActions, pym} from 'coral-framework';
-import {getDefinitionName} from 'coral-framework/utils';
+import {getDefinitionName, separateDataAndRoot} from 'coral-framework/utils';
 import Embed from '../components/Embed';
 import {setCommentCountCache, viewAllComments} from '../actions/stream';
 import {setActiveTab} from '../actions/embed';
@@ -84,14 +84,7 @@ export const withQuery = graphql(EMBED_QUERY, {
       excludeIgnored: Boolean(auth && auth.user && auth.user.id),
     },
   }),
-  props: ({data: {
-    fetchMore, loading, networkStatus, refetch, startPolling,
-    stopPolling, subscribeToMore, updateQuery, variables,
-    ...root}}) => ({
-      data: {fetchMore, loading, networkStatus, refetch, startPolling,
-        stopPolling, subscribeToMore, updateQuery, variables},
-      root,
-    }),
+  props: ({data}) => separateDataAndRoot(data),
 });
 
 const mapStateToProps = state => ({

client/coral-framework/utils/index.js

@@ -37,3 +37,27 @@ export function getDefinitionName(doc, pos = 0) {
   return doc.definitions[pos].name.value;
 }
 
+/**
+ * Separate apollo `data` props into `data` and `root`.
+ * `data` will contain props like `loading`, `fetchMore`...
+ * while `root` contains the actual query data.
+ */
+export function separateDataAndRoot(
+  {
+    fetchMore,
+    loading,
+    networkStatus,
+    refetch,
+    startPolling,
+    stopPolling,
+    subscribeToMore,
+    updateQuery,
+    variables,
+    ...root,
+  }) {
+  return {
+    data: {fetchMore, loading, networkStatus, refetch, startPolling,
+      stopPolling, subscribeToMore, updateQuery, variables},
+    root,
+  };
+}