Using fragment and updated fixtures

src/core/client/stream/containers/AppContainer.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-
+import { withFragmentContainer } from "talk-framework/lib/relay";
 import { graphql, withLocalStateContainer } from "talk-framework/lib/relay";
 import { AppContainerLocal as Local } from "talk-stream/__generated__/AppContainerLocal.graphql";
 import {
@@ -8,12 +8,13 @@ import {
   withSetActiveTabMutation,
 } from "talk-stream/mutations";
 
+import { AppContainer_asset as AssetData } from "talk-stream/__generated__/AppContainer_asset.graphql";
 import App from "../components/App";
 
 interface InnerProps {
   local: Local;
   setActiveTab: SetActiveTabMutation;
-  commentCount: number;
+  asset: AssetData;
 }
 
 class AppContainer extends React.Component<InnerProps> {
@@ -24,25 +25,37 @@ class AppContainer extends React.Component<InnerProps> {
   public render() {
     const {
       local: { activeTab },
-      commentCount,
+      asset,
     } = this.props;
 
     return (
       <App
         activeTab={activeTab}
         onTabClick={this.handleSetActiveTab}
-        commentCount={commentCount}
+        commentCount={asset.commentCounts.totalVisible}
       />
     );
   }
 }
 
-const enhanced = withLocalStateContainer(
-  graphql`
-    fragment AppContainerLocal on Local {
-      activeTab
-    }
-  `
-)(withSetActiveTabMutation(AppContainer));
+const enhanced = withSetActiveTabMutation(
+  withFragmentContainer<InnerProps>({
+    asset: graphql`
+      fragment AppContainer_asset on Asset {
+        commentCounts {
+          totalVisible
+        }
+      }
+    `,
+  })(
+    withLocalStateContainer(
+      graphql`
+        fragment AppContainerLocal on Local {
+          activeTab
+        }
+      `
+    )(AppContainer)
+  )
+);
 
 export default enhanced;