From 99dd6ea20a8a729da63229034c6ba3b194d33c4f Mon Sep 17 00:00:00 2001 From: roschaefer Date: Tue, 3 Sep 2019 21:20:16 +0200 Subject: [PATCH] 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. --- .../EditCommentForm/EditCommentForm.vue | 2 +- .../NotificationMenu/NotificationMenu.vue | 8 +- webapp/graphql/Fragments.js | 74 +++++++++++++++ webapp/graphql/PostQuery.js | 78 ++++------------ webapp/graphql/User.js | 90 ++++++------------- webapp/pages/index.vue | 3 +- webapp/pages/profile/_id/_slug.vue | 2 +- 7 files changed, 128 insertions(+), 129 deletions(-) create mode 100644 webapp/graphql/Fragments.js diff --git a/webapp/components/EditCommentForm/EditCommentForm.vue b/webapp/components/EditCommentForm/EditCommentForm.vue index 0a5cd7d98..2d20dc821 100644 --- a/webapp/components/EditCommentForm/EditCommentForm.vue +++ b/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, diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue index 9b0842301..49a9ed164 100644 --- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue +++ b/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) + } }, }, } diff --git a/webapp/graphql/Fragments.js b/webapp/graphql/Fragments.js new file mode 100644 index 000000000..4d23d4edb --- /dev/null +++ b/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 + } + } +` diff --git a/webapp/graphql/PostQuery.js b/webapp/graphql/PostQuery.js index c646052f7..f377fb32d 100644 --- a/webapp/graphql/PostQuery.js +++ b/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 } } } diff --git a/webapp/graphql/User.js b/webapp/graphql/User.js index af3850b09..0d2db7f4e 100644 --- a/webapp/graphql/User.js +++ b/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 + } + } } } } diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue index 5d03a309c..014fc0fe7 100644 --- a/webapp/pages/index.vue +++ b/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 }, diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue index 0bfb806cf..e67aa3177 100644 --- a/webapp/pages/profile/_id/_slug.vue +++ b/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]) }, },