diff --git a/components/CurrentReplies.js b/components/CurrentReplies.js
index 8e8b5624..f6667709 100644
--- a/components/CurrentReplies.js
+++ b/components/CurrentReplies.js
@@ -43,7 +43,7 @@ class DeletedItems extends React.Component {
         <ul className="items">
           {items.map(conn => (
             <ReplyConnection
-              key={conn.get('id')}
+              key={`${conn.get('articleId')}__${conn.get('replyId')}`}
               replyConnection={conn}
               onAction={this.handleRestore}
               disabled={disabled}
@@ -123,7 +123,7 @@ export default function CurrentReplies({
       {validConnections.map(conn => (
         <ReplyConnection
           authId={authId}
-          key={conn.get('id')}
+          key={`${conn.get('articleId')}__${conn.get('replyId')}`}
           replyConnection={conn}
           onAction={onDelete}
           onVote={onVote}
diff --git a/components/ReplyConnection.js b/components/ReplyConnection.js
index 0e1ce1a4..24ac0646 100644
--- a/components/ReplyConnection.js
+++ b/components/ReplyConnection.js
@@ -21,7 +21,7 @@ export default class ReplyConnection extends React.PureComponent {
 
   handleAction = () => {
     const { replyConnection, onAction } = this.props;
-    return onAction(replyConnection.get('id'));
+    return onAction(replyConnection);
   };
 
   renderHint = () => {
diff --git a/components/ReplyFeedback.js b/components/ReplyFeedback.js
index 28f69688..cf94ee3c 100644
--- a/components/ReplyFeedback.js
+++ b/components/ReplyFeedback.js
@@ -25,12 +25,12 @@ export default class ReplyFeedback extends PureComponent {
 
   handleUpVote = () => {
     const { replyConnection, onVote } = this.props;
-    return onVote(replyConnection.get('id'), 'UPVOTE');
+    return onVote(replyConnection, 'UPVOTE');
   };
 
   handleDownVote = () => {
     const { replyConnection, onVote } = this.props;
-    return onVote(replyConnection.get('id'), 'DOWNVOTE');
+    return onVote(replyConnection, 'DOWNVOTE');
   };
 
   getFeedbackScore = () => {
diff --git a/ducks/__tests__/__snapshots__/articleDetail.js.snap b/ducks/__tests__/__snapshots__/articleDetail.js.snap
index af7920b4..995b91ca 100644
--- a/ducks/__tests__/__snapshots__/articleDetail.js.snap
+++ b/ducks/__tests__/__snapshots__/articleDetail.js.snap
@@ -11,7 +11,8 @@ Immutable.Map {
   },
   "replyConnections": Immutable.List [
     Immutable.Map {
-      "id": "article1-reply1",
+      "articleId": "article1",
+      "replyId": "reply1",
       "canUpdateStatus": true,
       "status": "NORMAL",
       "reply": Immutable.Map {
@@ -75,7 +76,8 @@ Immutable.Map {
 exports[`reducer: articleDetail handles LOAD_AUTH 1`] = `
 Immutable.List [
   Immutable.Map {
-    "id": "article1-reply1",
+    "articleId": "article1",
+    "replyId": "reply1",
     "canUpdateStatus": true,
     "status": "NORMAL",
     "reply": Immutable.Map {
diff --git a/ducks/articleDetail.js b/ducks/articleDetail.js
index ea221e4e..a6babdf8 100644
--- a/ducks/articleDetail.js
+++ b/ducks/articleDetail.js
@@ -31,16 +31,17 @@ const fragments = {
       }
     }
   `,
-  replyConnectionAndUserFields: `
+  articleReplyAndUserFields: `
     fragment userFields on User {
       id
       name
       avatarUrl
     }
-    fragment replyConnectionFields on ReplyConnection {
-      id
+    fragment articleReplyFields on ArticleReply {
       canUpdateStatus
       status
+      articleId
+      replyId
       reply {
         id
         versions(limit: 1) {
@@ -74,14 +75,14 @@ export const load = id => dispatch => {
       GetArticle(id: $id) {
         ...articleFields
         user { ...userFields }
-        replyConnections { ...replyConnectionFields }
+        replyConnections: articleReplies { ...articleReplyFields }
         relatedArticles(filter: {replyCount: {GT: 0}}) {
           edges {
             node {
               ...articleFields
               user { ...userFields }
               replyCount
-              replyConnections { ...replyConnectionFields }
+              replyConnections: articleReplies { ...articleReplyFields }
             }
             score
           }
@@ -89,7 +90,7 @@ export const load = id => dispatch => {
       }
     }
     ${fragments.articleFields}
-    ${fragments.replyConnectionAndUserFields}
+    ${fragments.articleReplyAndUserFields}
   `({ id }).then(resp => {
     dispatch(loadData(resp.getIn(['data', 'GetArticle'])));
     dispatch(setState({ key: 'isLoading', value: false }));
@@ -103,8 +104,9 @@ export const loadAuth = id => dispatch => {
       gql`
         query($id: String!) {
           GetArticle(id: $id) {
-            replyConnections {
-              id
+            replyConnections: articleReplies {
+              articleId
+              replyId
               canUpdateStatus
             }
           }
@@ -123,12 +125,12 @@ const reloadReply = articleId => dispatch =>
   gql`
     query($id: String!) {
       GetArticle(id: $id) {
-        replyConnections {
-          ...replyConnectionFields
+        replyConnections: articleReplies {
+          ...articleReplyFields
         }
       }
     }
-    ${fragments.replyConnectionAndUserFields}
+    ${fragments.articleReplyAndUserFields}
   `({ id: articleId }).then(resp => {
     dispatch(loadData(resp.getIn(['data', 'GetArticle'])));
     dispatch(setState({ key: 'isReplyLoading', value: false }));
@@ -139,7 +141,7 @@ export const connectReply = (articleId, replyId) => dispatch => {
   NProgress.start();
   return gql`
     mutation($articleId: String!, $replyId: String!) {
-      CreateReplyConnection(articleId: $articleId, replyId: $replyId) {
+      CreateArticleReply(articleId: $articleId, replyId: $replyId) {
         id
       }
     }
@@ -149,23 +151,28 @@ export const connectReply = (articleId, replyId) => dispatch => {
   });
 };
 
-export const updateReplyConnectionStatus = (
+export const updateArticleReplyStatus = (
   articleId,
-  replyConnectionId,
+  replyId,
   status
 ) => dispatch => {
   dispatch(setState({ key: 'isReplyLoading', value: true }));
   NProgress.start();
   return gql`
-    mutation($replyConnectionId: String!, $status: ReplyConnectionStatusEnum!) {
-      UpdateReplyConnectionStatus(
-        replyConnectionId: $replyConnectionId
+    mutation(
+      $articleId: String!
+      $replyId: String!
+      $status: ArticleReplyStatusEnum!
+    ) {
+      UpdateArticleReplyStatus(
+        articleId: $articleId
+        replyId: $replyId
         status: $status
       ) {
-        id
+        status
       }
     }
-  `({ replyConnectionId, status }).then(() => {
+  `({ articleId, replyId, status }).then(() => {
     dispatch(reloadReply(articleId));
     NProgress.done();
   });
@@ -196,19 +203,20 @@ export const submitReply = params => dispatch => {
   });
 };
 
-export const voteReply = (articleId, replyConnectionId, vote) => dispatch => {
+export const voteReply = (articleId, replyId, vote) => dispatch => {
   dispatch(setState({ key: 'isReplyLoading', value: true }));
   NProgress.start();
   return gql`
-    mutation($replyConnectionId: String!, $vote: FeedbackVote!) {
-      CreateOrUpdateReplyConnectionFeedback(
-        replyConnectionId: $replyConnectionId
+    mutation($articleId: String!, $replyId: String!, $vote: FeedbackVote!) {
+      CreateOrUpdateArticleReplyFeedback(
+        articleId: $articleId
+        replyId: $replyId
         vote: $vote
       ) {
         feedbackCount
       }
     }
-  `({ replyConnectionId, vote }).then(() => {
+  `({ articleId, replyId, vote }).then(() => {
     dispatch(reloadReply(articleId));
     NProgress.done();
   });
@@ -236,7 +244,7 @@ export const searchReplies = ({ q }) => dispatch => {
               type
               createdAt
             }
-            replyConnections {
+            replyConnections: articleReplies {
               article {
                 id
                 text
@@ -285,7 +293,7 @@ export const searchRepiedArticle = ({ q }) => dispatch => {
             text
             replyCount
             createdAt
-            replyConnections {
+            replyConnections: articleReplies {
               reply {
                 id
                 versions {
@@ -402,11 +410,11 @@ export default createReducer(
 
     [LOAD_AUTH]: (state, { payload }) => {
       const idAuthMap = payload.get('replyConnections').reduce((agg, conn) => {
-        agg[conn.get('id')] = conn;
+        agg[conn.get('replyId')] = conn;
         return agg;
       }, {});
       return state.updateIn(['data', 'replyConnections'], replyConnections =>
-        replyConnections.map(conn => conn.merge(idAuthMap[conn.get('id')]))
+        replyConnections.map(conn => conn.merge(idAuthMap[conn.get('replyId')]))
       );
     },
 
diff --git a/ducks/fixtures/articleDetail.js b/ducks/fixtures/articleDetail.js
index 27dad387..0361cbf2 100644
--- a/ducks/fixtures/articleDetail.js
+++ b/ducks/fixtures/articleDetail.js
@@ -18,7 +18,8 @@ export const loadAction = {
             id: 'article1',
             replyConnections: [
               {
-                id: 'article1-relatedReply1',
+                articleId: 'article1',
+                replyId: 'relatedReply1',
                 canUpdateStatus: false,
                 reply: {
                   id: 'relatedReply1',
@@ -31,7 +32,8 @@ export const loadAction = {
                 },
               },
               {
-                id: 'article1-relatedReply2',
+                articleId: 'article1',
+                replyId: 'relatedReply2',
                 canUpdateStatus: false,
                 reply: {
                   id: 'relatedReply2',
@@ -44,7 +46,8 @@ export const loadAction = {
                 },
               },
               {
-                id: 'article1-reply1',
+                articleId: 'article1',
+                replyId: 'reply1',
                 canUpdateStatus: false,
                 reply: {
                   id: 'reply1', // Already added to article (exists in replyConnections)
@@ -67,7 +70,8 @@ export const loadAction = {
             text: '~~黎建南給退休軍公教人員的一封公開信~~',
             replyConnections: [
               {
-                id: 'article2-relatedReply1',
+                articleId: 'article2',
+                replyId: 'relatedReply1',
                 canUpdateStatus: false,
                 reply: {
                   // This is duplicated with related article 1
@@ -88,7 +92,8 @@ export const loadAction = {
     replyRequestCount: 1,
     replyConnections: [
       {
-        id: 'article1-reply1',
+        articleId: 'article1',
+        replyId: 'reply1',
         canUpdateStatus: true,
         status: 'NORMAL',
         reply: {
@@ -188,7 +193,8 @@ export const loadAuthAction = {
   payload: fromJS({
     replyConnections: [
       {
-        id: 'AV9mEFX2yCdS-nWhuiPu__AV9mJJ5qyCdS-nWhuiPz',
+        articleId: 'AV9mEFX2yCdS-nWhuiPu',
+        replyId: 'AV9mJJ5qyCdS-nWhuiPz',
         canUpdateStatus: true,
       },
     ],
diff --git a/ducks/replyDetail.js b/ducks/replyDetail.js
index b6bddc75..d270c7bf 100644
--- a/ducks/replyDetail.js
+++ b/ducks/replyDetail.js
@@ -31,13 +31,14 @@ export const load = id => dispatch => {
           reference
           createdAt
         }
-        replyConnections {
-          id
+        replyConnections: articleReplies {
+          articleId
           article {
             id
             text
             replyCount
           }
+          replyId
           user {
             name
           }
@@ -63,8 +64,9 @@ export const loadAuth = id => dispatch => {
       gql`
         query($id: String!) {
           GetReply(id: $id) {
-            replyConnections {
-              id
+            replyConnections: articleReplies {
+              articleId
+              replyId
               canUpdateStatus
             }
           }
@@ -77,23 +79,28 @@ export const loadAuth = id => dispatch => {
     });
 };
 
-export const updateReplyConnectionStatus = (
+export const updateArticleReplyStatus = (
+  articleId,
   replyId,
-  replyConnectionId,
   status
 ) => dispatch => {
   dispatch(setState({ key: 'isReplyLoading', value: true }));
   NProgress.start();
   return gql`
-    mutation($replyConnectionId: String!, $status: ReplyConnectionStatusEnum!) {
-      UpdateReplyConnectionStatus(
-        replyConnectionId: $replyConnectionId
+    mutation(
+      $articleId: String!
+      $replyId: String!
+      $status: ArticleReplyStatusEnum!
+    ) {
+      UpdateArticleReplyStatus(
+        articleId: $articleId
+        replyId: $replyId
         status: $status
       ) {
-        id
+        status
       }
     }
-  `({ replyConnectionId, status }).then(() => {
+  `({ articleId, replyId, status }).then(() => {
     // FIXME:
     // Immediate load(replyId) will not get updated reply connection status.
     // Super wierd.
@@ -107,19 +114,20 @@ export const updateReplyConnectionStatus = (
   });
 };
 
-export const voteReply = (replyId, replyConnectionId, vote) => dispatch => {
+export const voteReply = (articleId, replyId, vote) => dispatch => {
   dispatch(setState({ key: 'isReplyLoading', value: true }));
   NProgress.start();
   return gql`
-    mutation($replyConnectionId: String!, $vote: FeedbackVote!) {
-      CreateOrUpdateReplyConnectionFeedback(
-        replyConnectionId: $replyConnectionId
+    mutation($articleId: String!, $replyId: String!, $vote: FeedbackVote!) {
+      CreateOrUpdateArticleReplyFeedback(
+        articleId: $articleId
+        replyId: $replyId
         vote: $vote
       ) {
         feedbackCount
       }
     }
-  `({ replyConnectionId, vote }).then(() => {
+  `({ articleId, replyId, vote }).then(() => {
     dispatch(load(replyId)).then(() => {
       dispatch(setState({ key: 'isReplyLoading', value: false }));
     });
diff --git a/ducks/replyList.js b/ducks/replyList.js
index 800525c6..ec8da24b 100644
--- a/ducks/replyList.js
+++ b/ducks/replyList.js
@@ -69,7 +69,7 @@ export const load = ({
             type
             createdAt
           }
-          replyConnections(status: NORMAL) { id }
+          replyConnections: articleReplies(status: NORMAL) { replyId }
         }
         cursor
       }
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 00000000..67fc4dda
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./"
+  },
+  "exclude": ["node_modules"]
+}
\ No newline at end of file
diff --git a/pages/article.js b/pages/article.js
index e8cb42bc..23f4923c 100644
--- a/pages/article.js
+++ b/pages/article.js
@@ -20,7 +20,7 @@ import {
   connectReply,
   searchReplies,
   searchRepiedArticle,
-  updateReplyConnectionStatus,
+  updateArticleReplyStatus,
   voteReply,
   reset,
 } from 'ducks/articleDetail';
@@ -71,23 +71,23 @@ class ArticlePage extends React.Component {
     );
   };
 
-  handleReplyConnectionDelete = replyConnectionId => {
+  handleReplyConnectionDelete = conn => {
     const { dispatch, query: { id } } = this.props;
     return dispatch(
-      updateReplyConnectionStatus(id, replyConnectionId, 'DELETED')
+      updateArticleReplyStatus(id, conn.get('replyId'), 'DELETED')
     );
   };
 
-  handleReplyConnectionRestore = replyConnectionId => {
+  handleReplyConnectionRestore = conn => {
     const { dispatch, query: { id } } = this.props;
     return dispatch(
-      updateReplyConnectionStatus(id, replyConnectionId, 'NORMAL')
+      updateArticleReplyStatus(id, conn.get('replyId'), 'NORMAL')
     ).then(this.scrollToReplySection);
   };
 
-  handleReplyConnectionVote = (replyConnectionId, vote) => {
+  handleReplyConnectionVote = (conn, vote) => {
     const { dispatch, query: { id } } = this.props;
-    return dispatch(voteReply(id, replyConnectionId, vote));
+    return dispatch(voteReply(id, conn.get('replyId'), vote));
   };
 
   handleTabChange = tab => () => {
diff --git a/pages/reply.js b/pages/reply.js
index b237a95c..84e7be85 100644
--- a/pages/reply.js
+++ b/pages/reply.js
@@ -6,7 +6,7 @@ import { compose } from 'redux';
 import {
   load,
   loadAuth,
-  updateReplyConnectionStatus,
+  updateArticleReplyStatus,
   voteReply,
 } from '../ducks/replyDetail';
 import Head from 'next/head';
@@ -49,9 +49,9 @@ class ReplyPage extends React.Component {
   handleReplyConnectionDelete = () => {
     const { dispatch, originalReplyConnection, query: { id } } = this.props;
     return dispatch(
-      updateReplyConnectionStatus(
+      updateArticleReplyStatus(
+        originalReplyConnection.get('articleId'),
         id,
-        originalReplyConnection.get('id'),
         'DELETED'
       )
     );
@@ -60,9 +60,9 @@ class ReplyPage extends React.Component {
   handleReplyConnectionRestore = () => {
     const { dispatch, originalReplyConnection, query: { id } } = this.props;
     return dispatch(
-      updateReplyConnectionStatus(
+      updateArticleReplyStatus(
+        originalReplyConnection.get('articleId'),
         id,
-        originalReplyConnection.get('id'),
         'NORMAL'
       )
     );
@@ -84,9 +84,9 @@ class ReplyPage extends React.Component {
     );
   };
 
-  handleReplyConnectionVote = (replyConnectionId, vote) => {
+  handleReplyConnectionVote = (conn, vote) => {
     const { dispatch, query: { id } } = this.props;
-    return dispatch(voteReply(id, replyConnectionId, vote));
+    return dispatch(voteReply(conn.get('articleId'), id, vote));
   };
 
   renderReply = () => {