Loads post

Author: velopert

src/components/post/PostTemplate.tsx

@@ -6,8 +6,8 @@ const PostTemplateBlock = styled(PageTemplate)``;
 
 interface PostTemplateProps {}
 
-const PostTemplate: React.SFC<PostTemplateProps> = props => {
-  return <PostTemplateBlock>포스트임</PostTemplateBlock>;
+const PostTemplate: React.SFC<PostTemplateProps> = ({ children }) => {
+  return <PostTemplateBlock>{children}</PostTemplateBlock>;
 };
 
 export default PostTemplate;

src/containers/post/PostViewer.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Query, QueryResult } from 'react-apollo';
+import { READ_POST, SinglePost } from '../../lib/graphql/post';
+
+export interface PostViewerProps {
+  username: string;
+  urlSlug: string;
+}
+
+const PostViewer: React.FC<PostViewerProps> = ({ username, urlSlug }) => {
+  return (
+    <Query
+      query={READ_POST}
+      variables={{
+        username,
+        url_slug: urlSlug,
+      }}
+    >
+      {(result: QueryResult<{ post: SinglePost }>) => {
+        console.log(result);
+        return null;
+      }}
+    </Query>
+  );
+};
+
+export default PostViewer;

src/lib/graphql/post.ts

@@ -37,8 +37,33 @@ export type PartialPost = {
   comments_count: number;
 };
 
+// Generated by https://quicktype.io
+
+export interface SinglePost {
+  id: string;
+  title: string;
+  released_at: string;
+  updated_at: string;
+  tags: string[];
+  body: string;
+  is_markdown: boolean;
+  is_private: boolean;
+  is_temp: boolean;
+  user: {
+    username: string;
+    profile: {
+      display_name: string;
+      thumbnail: string;
+      short_bio: string;
+    };
+    velog_config: {
+      title: string;
+    };
+  };
+}
+
 export const GET_POST_LIST = gql`
-  query Post($cursor: ID) {
+  query Posts($cursor: ID) {
     posts(cursor: $cursor) {
       id
       title
@@ -60,6 +85,33 @@ export const GET_POST_LIST = gql`
   }
 `;
 
+export const READ_POST = gql`
+  query ReadPost($username: String, $url_slug: String) {
+    post(username: $username, url_slug: $url_slug) {
+      id
+      title
+      released_at
+      updated_at
+      tags
+      body
+      is_markdown
+      is_private
+      is_temp
+      user {
+        username
+        profile {
+          display_name
+          thumbnail
+          short_bio
+        }
+        velog_config {
+          title
+        }
+      }
+    }
+  }
+`;
+
 export const WRITE_POST = gql`
   mutation WritePost(
     $title: String

src/pages/PostPage.tsx

@@ -1,10 +1,22 @@
 import * as React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
 import PostTemplate from '../components/post/PostTemplate';
+import PostViewer from '../containers/post/PostViewer';
 
-interface PostPageProps {}
+interface PostPageProps
+  extends RouteComponentProps<{
+    username: string;
+    urlSlug: string;
+  }> {}
 
-const PostPage: React.SFC<PostPageProps> = () => {
-  return <PostTemplate />;
+const PostPage: React.SFC<PostPageProps> = ({ match }) => {
+  const { username, urlSlug } = match.params;
+
+  return (
+    <PostTemplate>
+      <PostViewer username={username} urlSlug={urlSlug} />
+    </PostTemplate>
+  );
 };
 
 export default PostPage;