Progress:

src/core/client/stream/components/PermalinkView.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import { CommentProps } from "talk-stream/components/Comment";
+import { Flex } from "talk-ui/components";
+import CommentContainer from "../containers/CommentContainer";
+
+export interface AppProps {
+  comment: CommentProps | null;
+}
+
+const PermalinkView: StatelessComponent<AppProps> = props => {
+  if (props.comment) {
+    return (
+      <Flex justifyContent="center">
+        <Flex direction="column" itemGutter>
+          <CommentContainer data={props.comment} />
+        </Flex>
+      </Flex>
+    );
+  }
+
+  return <div> Error </div>;
+};
+
+export default PermalinkView;

src/core/client/stream/components/Stream.tsx

@@ -10,50 +10,67 @@ import ReplyListContainer from "../containers/ReplyListContainer";
 import Logo from "./Logo";
 import * as styles from "./Stream.css";
 
+import { Comment, CommentProps } from "talk-stream/components/Comment";
+
 export interface StreamProps {
   assetID: string;
-  isClosed: boolean;
-  comments: ReadonlyArray<{ id: string }>;
-  onLoadMore: () => void;
-  hasMore: boolean;
-  disableLoadMore: boolean;
+  comment?: CommentProps;
+  isClosed?: boolean;
+  comments?: ReadonlyArray<{ id: string }>;
+  onLoadMore?: () => void;
+  hasMore?: boolean;
+  disableLoadMore?: boolean;
 }
 
 const Stream: StatelessComponent<StreamProps> = props => {
-  return (
-    <div className={styles.root}>
-      <Logo gutterBottom />
-      <PostCommentFormContainer assetID={props.assetID} />
-      <Flex
-        direction="column"
-        id="talk-comments-stream-log"
-        role="log"
-        aria-live="polite"
-        itemGutter
-      >
-        {props.comments.map(comment => (
-          <Flex direction="column" key={comment.id} itemGutter>
-            <CommentContainer data={comment} />
-            <ReplyListContainer comment={comment} />
-          </Flex>
-        ))}
-        {props.hasMore && (
-          <Localized id="comments-stream-loadMore">
-            <Button
-              id={"talk-comments-stream-loadMore"}
-              onClick={props.onLoadMore}
-              variant="outlined"
-              fullWidth
-              disabled={props.disableLoadMore}
-              aria-controls="talk-comments-stream-log"
-            >
-              Load More
-            </Button>
-          </Localized>
-        )}
+  if (props.comment) {
+    return (
+      <Flex justifyContent="center" className={styles.root}>
+        <Flex direction="column" itemGutter>
+          <Comment {...props.comment} />
+        </Flex>
       </Flex>
-    </div>
-  );
+    );
+  }
+
+  if (props.comments) {
+    return (
+      <div className={styles.root}>
+        <Logo gutterBottom />
+        <PostCommentFormContainer assetID={props.assetID} />
+        <Flex
+          direction="column"
+          id="talk-comments-stream-log"
+          role="log"
+          aria-live="polite"
+          itemGutter
+        >
+          {props.comments.map(comment => (
+            <Flex direction="column" key={comment.id} itemGutter>
+              <CommentContainer data={comment} />
+              <ReplyListContainer comment={comment} />
+            </Flex>
+          ))}
+          {props.hasMore && (
+            <Localized id="comments-stream-loadMore">
+              <Button
+                id={"talk-comments-stream-loadMore"}
+                onClick={props.onLoadMore}
+                variant="outlined"
+                fullWidth
+                disabled={props.disableLoadMore}
+                aria-controls="talk-comments-stream-log"
+              >
+                Load More
+              </Button>
+            </Localized>
+          )}
+        </Flex>
+      </div>
+    );
+  }
+
+  return <div>Error</div>;
 };
 
 export default Stream;

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

@@ -12,6 +12,7 @@ interface InnerProps {
 }
 
 export const AppContainer: StatelessComponent<InnerProps> = props => {
+  console.log("App query render", props);
   return <App {...props.data} />;
 };
 

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

@@ -0,0 +1,37 @@
+import React, { StatelessComponent } from "react";
+import { graphql } from "react-relay";
+
+import { withFragmentContainer } from "talk-framework/lib/relay";
+import { PropTypesOf } from "talk-framework/types";
+
+import PermalinkView from "../components/PermalinkView";
+
+import { PermalinkViewContainer as Data } from "talk-stream/__generated__/PermalinkViewContainer.graphql";
+
+interface InnerProps {
+  data: Data;
+}
+
+export const PermalinkViewContainer: StatelessComponent<InnerProps> = props => {
+  console.log("App query render", props);
+  return <PermalinkView {...props.data} />;
+};
+
+const enhanced = withFragmentContainer<{ data: Data }>({
+  data: graphql`
+    fragment PermalinkViewContainer on Query
+      @argumentDefinitions(commentID: { type: "ID!" }) {
+      comment(id: $commentID) {
+        id
+        body
+        author {
+          username
+        }
+        createdAt
+      }
+    }
+  `,
+})(PermalinkViewContainer);
+
+export type PermalinkViewContainerProps = PropTypesOf<typeof enhanced>;
+export default enhanced;

src/core/client/stream/local/initLocalState.ts

@@ -21,10 +21,15 @@ export default async function initLocalState(environment: Environment) {
 
     // Parse query params
     const query = qs.parse(location.search);
+
     if (query.assetID) {
       localRecord.setValue(query.assetID, "assetID");
     }
 
+    if (query.commentID) {
+      localRecord.setValue(query.commentID, "commentID");
+    }
+
     // Create network Record
     const networkRecord = createAndRetain(
       environment,

src/core/client/stream/local/local.graphql

@@ -6,6 +6,7 @@ type Network {
 type Local {
   network: Network!
   assetID: String
+  commentID: String
 }
 
 extend type Query {

src/core/client/stream/queries/AppQuery.tsx

@@ -14,6 +14,7 @@ import {
 import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql";
 
 import AppContainer from "../containers/AppContainer";
+import PermalinkViewQuery from "./PermalinkViewQuery";
 
 export const render = ({ error, props }: ReadyState<AppQueryResponse>) => {
   if (error) {
@@ -30,6 +31,10 @@ interface InnerProps {
 }
 
 const AppQuery: StatelessComponent<InnerProps> = props => {
+  if (props.local.commentID) {
+    return <PermalinkViewQuery commentID={props.local.commentID} />;
+  }
+
   return (
     <QueryRenderer<AppQueryVariables, AppQueryResponse>
       query={graphql`
@@ -49,6 +54,7 @@ const enhanced = withLocalStateContainer<Local>(
   graphql`
     fragment AppQueryLocal on Local {
       assetID
+      commentID
     }
   `
 )(AppQuery);

src/core/client/stream/queries/PermalinkViewQuery.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+import { ReadyState } from "react-relay";
+
+import { graphql, QueryRenderer } from "talk-framework/lib/relay";
+
+import {
+  PermalinkViewQueryResponse,
+  PermalinkViewQueryVariables,
+} from "talk-stream/__generated__/PermalinkViewQuery.graphql";
+import { PermalinkViewContainer } from "talk-stream/containers/PermalinkViewContainer";
+
+export interface CommentData {
+  id: string;
+  author: {
+    username: string;
+  } | null;
+  body: string | null;
+  createdAt: string;
+}
+
+export const render = ({
+  error,
+  props,
+}: ReadyState<{
+  comment: CommentData;
+}>) => {
+  if (error) {
+    return <div>{error.message}</div>;
+  }
+  if (props) {
+    return <PermalinkViewContainer data={props} />;
+  }
+  return <div>Loading</div>;
+};
+
+interface InnerProps {
+  commentID: string;
+}
+
+const PermalinkViewQuery: StatelessComponent<InnerProps> = props => {
+  return (
+    <QueryRenderer<PermalinkViewQueryVariables, PermalinkViewQueryResponse>
+      query={graphql`
+        query PermalinkViewQuery($commentID: ID!) {
+          ...PermalinkViewContainer @arguments(commentID: $commentID)
+        }
+      `}
+      variables={{
+        commentID: props.commentID,
+      }}
+      render={render}
+    />
+  );
+};
+
+export default PermalinkViewQuery;

src/core/server/graph/tenant/resolvers/query.ts

@@ -10,6 +10,6 @@ export default {
     source: void,
     { id }: { id: string; url: string },
     ctx: TenantContext
-  ) => ctx.loaders.Comments.comment.load(id),
+  ) => (id ? ctx.loaders.Comments.comment.load(id) : null),
   settings: async (parent: any, args: any, ctx: TenantContext) => ctx.tenant,
 };