Centralize fragments, fix @mattwr18's bugs

Most of those bugs weren't even introduced in this PR, e.g. the missing
`this.$i18n` for the comments mutations.

webapp/components/EditCommentForm/EditCommentForm.vue

@@ -68,7 +68,7 @@ export default {
       this.disabled = true
       this.$apollo
         .mutate({
-          mutation: CommentMutations().UpdateComment,
+          mutation: CommentMutations(this.$i18n).UpdateComment,
           variables: {
             content: this.form.content,
             id: this.comment.id,

webapp/components/notifications/NotificationMenu/NotificationMenu.vue

@@ -42,7 +42,7 @@ export default {
         const {
           data: { markAsRead },
         } = await this.$apollo.mutate({
-          mutation: markAsReadMutation(),
+          mutation: markAsReadMutation(this.$i18n),
           variables,
         })
         if (!(markAsRead && markAsRead.read === true)) return
@@ -56,12 +56,14 @@ export default {
   },
   computed: {
     totalNotifications() {
-      return this.notifications.length
+      return (this.notifications || []).length
     },
   },
   apollo: {
     notifications: {
-      query: notificationQuery(),
+      query() {
+        return notificationQuery(this.$i18n)
+      }
     },
   },
 }

webapp/graphql/Fragments.js

@@ -0,0 +1,74 @@
+import gql from 'graphql-tag'
+
+export const userFragment = lang => gql`
+  fragment user on User {
+    id
+    slug
+    name
+    avatar
+    disabled
+    deleted
+    shoutedCount
+    contributionsCount
+    commentedCount
+    followedByCount
+    followedByCurrentUser
+    location {
+      name: name${lang}
+    }
+    badges {
+      id
+      icon
+    }
+  }
+`
+
+export const postCountsFragment = gql`
+  fragment postCounts on Post {
+    commentsCount
+    shoutedCount
+    shoutedByCurrentUser
+    emotionsCount
+  }
+`
+export const postFragment = lang => gql`
+  ${userFragment(lang)}
+
+  fragment post on Post {
+    id
+    title
+    content
+    contentExcerpt
+    createdAt
+    disabled
+    deleted
+    slug
+    image
+    author {
+      ...user
+    }
+    tags {
+      id
+    }
+    categories {
+      id
+      name
+      icon
+    }
+  }
+`
+export const commentFragment = lang => gql`
+  ${userFragment(lang)}
+
+  fragment comment on Comment {
+    id
+    createdAt
+    disabled
+    deleted
+    content
+    contentExcerpt
+    author {
+      ...user
+    }
+  }
+`

webapp/graphql/PostQuery.js

@@ -1,72 +1,19 @@
 import gql from 'graphql-tag'
-
-const fragments = lang => gql`
-fragment user on User {
-  id
-  slug
-  name
-  avatar
-  disabled
-  deleted
-  shoutedCount
-  contributionsCount
-  commentedCount
-  followedByCount
-  followedByCurrentUser
-  location {
-    name: name${lang}
-  }
-  badges {
-    id
-    icon
-  }
-}
-
-fragment post on Post {
-  id
-  title
-  content
-  contentExcerpt
-  createdAt
-  disabled
-  deleted
-  slug
-  image
-  commentsCount
-  shoutedCount
-  shoutedByCurrentUser
-  emotionsCount
-  author {
-    ...user
-  }
-  tags {
-    id
-  }
-  categories {
-    id
-    name
-    icon
-  }
-}
-`
+import { postFragment, commentFragment, postCountsFragment, userFragment } from './Fragments'
 
 export default i18n => {
   const lang = i18n.locale().toUpperCase()
   return gql`
-    ${fragments(lang)}
+    ${postFragment(lang)}
+    ${postCountsFragment}
+    ${commentFragment(lang)}
+
     query Post($id: ID!) {
       Post(id: $id) {
         ...post
+        ...postCounts
         comments(orderBy: createdAt_asc) {
-          id
-          contentExcerpt
-          content
-          createdAt
-          disabled
-          deleted
-          author {
-            ...user
-          }
+          ...comment
         }
       }
     }
@@ -76,10 +23,13 @@ export default i18n => {
 export const filterPosts = i18n => {
   const lang = i18n.locale().toUpperCase()
   return gql`
-    ${fragments(lang)}
+    ${postFragment(lang)}
+    ${postCountsFragment}
+
     query Post($filter: _PostFilter, $first: Int, $offset: Int, $orderBy: [_PostOrdering]) {
       Post(filter: $filter, first: $first, offset: $offset, orderBy: $orderBy) {
         ...post
+        ...postCounts
       }
     }
   `
@@ -96,12 +46,16 @@ export const PostsEmotionsByCurrentUser = () => {
 export const relatedContributions = i18n => {
   const lang = i18n.locale().toUpperCase()
   return gql`
-    ${fragments(lang)}
+    ${postFragment(lang)}
+    ${postCountsFragment}
+
     query Post($slug: String!) {
       Post(slug: $slug) {
         ...post
+        ...postCounts
         relatedContributions(first: 2) {
           ...post
+          ...postCounts
         }
       }
     }

webapp/graphql/User.js

@@ -1,57 +1,5 @@
 import gql from 'graphql-tag'
-
-const fragments = gql`
-  fragment post on Post {
-    id
-    createdAt
-    disabled
-    deleted
-    title
-    contentExcerpt
-    slug
-    author {
-      id
-      slug
-      name
-      disabled
-      deleted
-      avatar
-    }
-  }
-
-  fragment comment on Comment {
-    id
-    createdAt
-    disabled
-    deleted
-    contentExcerpt
-    author {
-      id
-      slug
-      name
-      disabled
-      deleted
-      avatar
-    }
-    post {
-      id
-      createdAt
-      disabled
-      deleted
-      title
-      contentExcerpt
-      slug
-      author {
-        id
-        slug
-        name
-        disabled
-        deleted
-        avatar
-      }
-    }
-  }
-`
+import { postFragment, commentFragment } from './Fragments'
 
 export default i18n => {
   const lang = i18n.locale().toUpperCase()
@@ -129,9 +77,12 @@ export default i18n => {
   `
 }
 
-export const notificationQuery = () => {
+export const notificationQuery = (i18n) => {
+  const lang = i18n.locale().toUpperCase()
   return gql`
-    ${fragments}
+    ${commentFragment(lang)}
+    ${postFragment(lang)}
+
     query {
       notifications(read: false, orderBy: createdAt_desc) {
         read
@@ -139,17 +90,27 @@ export const notificationQuery = () => {
         createdAt
         from {
           __typename
-          ...post
-          ...comment
+          ... on Post {
+            ...post
+          }
+          ... on Comment {
+            ...comment
+            post {
+              ...post
+            }
+          }
         }
       }
     }
   `
 }
 
-export const markAsReadMutation = () => {
+export const markAsReadMutation = (i18n) => {
+  const lang = i18n.locale().toUpperCase()
   return gql`
-    ${fragments}
+    ${commentFragment(lang)}
+    ${postFragment(lang)}
+
     mutation($id: ID!) {
       markAsRead(id: $id) {
         read
@@ -157,8 +118,15 @@ export const markAsReadMutation = () => {
         createdAt
         from {
           __typename
-          ...post
-          ...comment
+          ... on Post {
+            ...post
+          }
+          ... on Comment {
+            ...comment
+            post {
+              ...post
+            }
+          }
         }
       }
     }

webapp/pages/index.vue

@@ -185,7 +185,8 @@ export default {
         return result
       },
       update({ Post }) {
-        this.hasMore = Post.length >= this.pageSize
+        this.hasMore = Post && Post.length >= this.pageSize
+        if(!Post) return
         const posts = uniqBy([...this.posts, ...Post], 'id')
         this.posts = posts
       },

webapp/pages/profile/_id/_slug.vue

@@ -398,11 +398,11 @@ export default {
       },
       fetchPolicy: 'cache-and-network',
       update({ Post }) {
+        this.hasMore = Post && Post.length >= this.pageSize
         if (!Post) return
         // TODO: find out why `update` gets called twice initially.
         // We have to filter for uniq posts only because we get the same
         // result set twice.
-        this.hasMore = Post.length >= this.pageSize
         this.posts = this.uniq([...this.posts, ...Post])
       },
     },