fix(webapp): fix user avatar & post image urls (#8921)

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>

webapp/graphql/CommentMutations.js

@@ -1,9 +1,12 @@
 import gql from 'graphql-tag'
+import { imageUrls } from './fragments/imageUrls'
 
 export default (i18n) => {
   const lang = i18n.locale().toUpperCase()
   return {
     CreateComment: gql`
+      ${imageUrls}
+
       mutation ($postId: ID!, $content: String!) {
         CreateComment(postId: $postId, content: $content) {
           id
@@ -20,7 +23,7 @@ export default (i18n) => {
             slug
             name
             avatar {
-              url
+              ...imageUrls
             }
             disabled
             deleted
@@ -38,6 +41,8 @@ export default (i18n) => {
       }
     `,
     UpdateComment: gql`
+      ${imageUrls}
+
       mutation ($content: String!, $id: ID!) {
         UpdateComment(content: $content, id: $id) {
           id
@@ -52,7 +57,7 @@ export default (i18n) => {
             slug
             name
             avatar {
-              url
+              ...imageUrls
             }
             disabled
             deleted
@@ -61,6 +66,8 @@ export default (i18n) => {
       }
     `,
     DeleteComment: gql`
+      ${imageUrls}
+
       mutation($id: ID!) {
         DeleteComment(id: $id) {
           id
@@ -74,7 +81,7 @@ export default (i18n) => {
             slug
             name
             avatar {
-              url
+              ...imageUrls
             }
             disabled
             deleted

webapp/graphql/CommentQuery.js

@@ -1,8 +1,11 @@
 import gql from 'graphql-tag'
+import { imageUrls } from './fragments/imageUrls'
 
 export default (app) => {
   const lang = app.$i18n.locale().toUpperCase()
   return gql`
+    ${imageUrls}
+
     query Comment($postId: ID) {
       Comment(postId: $postId) {
         id
@@ -13,7 +16,7 @@ export default (app) => {
           slug
           name
           avatar {
-            url
+            ...imageUrls
           }
           disabled
           deleted

webapp/graphql/Fragments.js

@@ -1,171 +0,0 @@
-import gql from 'graphql-tag'
-
-export const userFragment = gql`
-  fragment user on User {
-    id
-    slug
-    name
-    avatar {
-      url
-      w320: transform(width: 320)
-      w640: transform(width: 640)
-      w1024: transform(width: 1024)
-    }
-    disabled
-    deleted
-  }
-`
-
-export const locationFragment = (type, lang) => gql`
-  fragment location on ${type} {
-    locationName
-    location {
-      id
-      name: name${lang}
-      lng
-      lat
-      distanceToMe
-    }
-  }
-`
-
-export const badgesFragment = gql`
-  fragment badges on User {
-    badgeTrophiesSelected {
-      id
-      icon
-      description
-    }
-    badgeVerification {
-      id
-      icon
-      description
-    }
-  }
-`
-
-export const userCountsFragment = gql`
-  fragment userCounts on User {
-    shoutedCount
-    contributionsCount
-    commentedCount
-    followedByCount
-    followingCount
-    followedByCurrentUser
-  }
-`
-
-export const userTeaserFragment = (lang) => gql`
-  ${badgesFragment}
-  ${locationFragment('User', lang)}
-
-  fragment userTeaser on User {
-    followedByCount
-    contributionsCount
-    commentedCount
-    ...badges
-    ...location
-  }
-`
-
-export const postFragment = gql`
-  fragment post on Post {
-    id
-    title
-    content
-    contentExcerpt
-    createdAt
-    updatedAt
-    sortDate
-    disabled
-    deleted
-    slug
-    language
-    image {
-      url
-      w320: transform(width: 320)
-      w640: transform(width: 640)
-      w1024: transform(width: 1024)
-      sensitive
-      aspectRatio
-      type
-    }
-    author {
-      ...user
-    }
-    pinnedAt
-    pinned
-    isObservedByMe
-    observingUsersCount
-  }
-`
-
-export const groupFragment = gql`
-  fragment group on Group {
-    id
-    groupName: name
-    slug
-    disabled
-    deleted
-    about
-    description
-    descriptionExcerpt
-    groupType
-    actionRadius
-    categories {
-      id
-      slug
-      name
-      icon
-    }
-    locationName
-    myRole
-  }
-`
-
-export const postCountsFragment = gql`
-  fragment postCounts on Post {
-    commentsCount
-    shoutedCount
-    shoutedByCurrentUser
-    emotionsCount
-    clickedCount
-    viewedTeaserCount
-    viewedTeaserByCurrentUser
-  }
-`
-
-export const tagsCategoriesAndPinnedFragment = gql`
-  fragment tagsCategoriesAndPinned on Post {
-    tags {
-      id
-    }
-    categories {
-      id
-      slug
-      name
-      icon
-    }
-    pinnedBy {
-      id
-      name
-      role
-    }
-  }
-`
-
-export const commentFragment = gql`
-  fragment comment on Comment {
-    id
-    createdAt
-    updatedAt
-    disabled
-    deleted
-    content
-    contentExcerpt
-    isPostObservedByMe
-    postObservingUsersCount
-    shoutedByCurrentUser
-    shoutedCount
-  }
-`

webapp/graphql/InviteCode.js

@@ -1,6 +1,9 @@
 import gql from 'graphql-tag'
+import { imageUrls } from './fragments/imageUrls'
 
 export const validateInviteCode = () => gql`
+  ${imageUrls}
+
   query validateInviteCode($code: String!) {
     validateInviteCode(code: $code) {
       code
@@ -10,13 +13,13 @@ export const validateInviteCode = () => gql`
         name
         about
         avatar {
-          url
+          ...imageUrls
         }
       }
       generatedBy {
         name
         avatar {
-          url
+          ...imageUrls
         }
       }
       isValid
@@ -25,6 +28,8 @@ export const validateInviteCode = () => gql`
 `
 
 export const generatePersonalInviteCode = () => gql`
+  ${imageUrls}
+
   mutation generatePersonalInviteCode($expiresAt: String, $comment: String) {
     generatePersonalInviteCode(expiresAt: $expiresAt, comment: $comment) {
       code
@@ -33,14 +38,14 @@ export const generatePersonalInviteCode = () => gql`
         id
         name
         avatar {
-          url
+          ...imageUrls
         }
       }
       redeemedBy {
         id
         name
         avatar {
-          url
+          ...imageUrls
         }
       }
       redeemedByCount
@@ -51,7 +56,7 @@ export const generatePersonalInviteCode = () => gql`
         name
         about
         avatar {
-          url
+          ...imageUrls
         }
       }
       isValid
@@ -60,6 +65,8 @@ export const generatePersonalInviteCode = () => gql`
 `
 
 export const generateGroupInviteCode = () => gql`
+  ${imageUrls}
+
   mutation generateGroupInviteCode($groupId: ID!, $expiresAt: String, $comment: String) {
     generateGroupInviteCode(groupId: $groupId, expiresAt: $expiresAt, comment: $comment) {
       code
@@ -68,14 +75,14 @@ export const generateGroupInviteCode = () => gql`
         id
         name
         avatar {
-          url
+          ...imageUrls
         }
       }
       redeemedBy {
         id
         name
         avatar {
-          url
+          ...imageUrls
         }
       }
       redeemedByCount
@@ -87,7 +94,7 @@ export const generateGroupInviteCode = () => gql`
         name
         about
         avatar {
-          url
+          ...imageUrls
         }
       }
       isValid
@@ -96,6 +103,8 @@ export const generateGroupInviteCode = () => gql`
 `
 
 export const invalidateInviteCode = () => gql`
+  ${imageUrls}
+
   mutation invalidateInviteCode($code: String!) {
     invalidateInviteCode(code: $code) {
       code
@@ -104,14 +113,14 @@ export const invalidateInviteCode = () => gql`
         id
         name
         avatar {
-          url
+          ...imageUrls
         }
       }
       redeemedBy {
         id
         name
         avatar {
-          url
+          ...imageUrls
         }
       }
       redeemedByCount
@@ -123,7 +132,7 @@ export const invalidateInviteCode = () => gql`
         name
         about
         avatar {
-          url
+          ...imageUrls
         }
       }
       isValid

webapp/graphql/PostMutations.js

@@ -1,8 +1,11 @@
 import gql from 'graphql-tag'
+import { imageUrls } from './fragments/imageUrls'
 
 export default () => {
   return {
     CreatePost: gql`
+      ${imageUrls}
+
       mutation (
         $id: ID
         $title: String!
@@ -32,7 +35,7 @@ export default () => {
           contentExcerpt
           language
           image {
-            url
+            ...imageUrls
             sensitive
           }
           disabled
@@ -56,6 +59,8 @@ export default () => {
       }
     `,
     UpdatePost: gql`
+      ${imageUrls}
+
       mutation (
         $id: ID!
         $title: String!
@@ -81,7 +86,7 @@ export default () => {
           contentExcerpt
           language
           image {
-            url
+            ...imageUrls
             sensitive
             aspectRatio
           }

webapp/graphql/PostQuery.js

@@ -1,26 +1,24 @@
 import gql from 'graphql-tag'
-import {
+import { user } from './fragments/user'
-  userFragment,
+import { post } from './fragments/post'
-  postFragment,
+import { comment } from './fragments/comment'
-  commentFragment,
+import { postCounts } from './fragments/postCounts'
-  postCountsFragment,
+import { userCounts } from './fragments/userCounts'
-  userCountsFragment,
+import { location } from './fragments/location'
-  locationFragment,
+import { badges } from './fragments/badges'
-  badgesFragment,
+import { tagsCategoriesAndPinned } from './fragments/tagsCategoriesAndPinned'
-  tagsCategoriesAndPinnedFragment,
-} from './Fragments'
 
 export default (i18n) => {
   const lang = i18n.locale().toUpperCase()
   return gql`
-    ${userFragment}
+    ${user}
-    ${userCountsFragment}
+    ${userCounts}
-    ${locationFragment('User', lang)}
+    ${location('User', lang)}
-    ${badgesFragment}
+    ${badges}
-    ${postFragment}
+    ${post}
-    ${postCountsFragment}
+    ${postCounts}
-    ${tagsCategoriesAndPinnedFragment}
+    ${tagsCategoriesAndPinned}
-    ${commentFragment}
+    ${comment}
 
     query Post($id: ID!) {
       Post(id: $id) {
@@ -63,13 +61,13 @@ export default (i18n) => {
 export const filterPosts = (i18n) => {
   const lang = i18n.locale().toUpperCase()
   return gql`
-    ${userFragment}
+    ${user}
-    ${userCountsFragment}
+    ${userCounts}
-    ${locationFragment('User', lang)}
+    ${location('User', lang)}
-    ${badgesFragment}
+    ${badges}
-    ${postFragment}
+    ${post}
-    ${postCountsFragment}
+    ${postCounts}
-    ${tagsCategoriesAndPinnedFragment}
+    ${tagsCategoriesAndPinned}
 
     query Post($filter: _PostFilter, $first: Int, $offset: Int, $orderBy: [_PostOrdering]) {
       Post(filter: $filter, first: $first, offset: $offset, orderBy: $orderBy) {
@@ -106,13 +104,13 @@ export const filterPosts = (i18n) => {
 export const profilePagePosts = (i18n) => {
   const lang = i18n.locale().toUpperCase()
   return gql`
-    ${userFragment}
+    ${user}
-    ${userCountsFragment}
+    ${userCounts}
-    ${locationFragment('User', lang)}
+    ${location('User', lang)}
-    ${badgesFragment}
+    ${badges}
-    ${postFragment}
+    ${post}
-    ${postCountsFragment}
+    ${postCounts}
-    ${tagsCategoriesAndPinnedFragment}
+    ${tagsCategoriesAndPinned}
 
     query profilePagePosts(
       $filter: _PostFilter
@@ -156,13 +154,13 @@ export const PostsEmotionsByCurrentUser = () => {
 export const relatedContributions = (i18n) => {
   const lang = i18n.locale().toUpperCase()
   return gql`
-    ${userFragment}
+    ${user}
-    ${userCountsFragment}
+    ${userCounts}
-    ${locationFragment('User', lang)}
+    ${location('User', lang)}
-    ${badgesFragment}
+    ${badges}
-    ${postFragment}
+    ${post}
-    ${postCountsFragment}
+    ${postCounts}
-    ${tagsCategoriesAndPinnedFragment}
+    ${tagsCategoriesAndPinned}
 
     query Post($slug: String!) {
       Post(slug: $slug) {

webapp/graphql/Rooms.js

@@ -1,6 +1,9 @@
 import gql from 'graphql-tag'
+import { imageUrls } from './fragments/imageUrls'
 
 export const createRoom = () => gql`
+  ${imageUrls}
+
   mutation ($userId: ID!) {
     CreateRoom(userId: $userId) {
       id
@@ -15,7 +18,7 @@ export const createRoom = () => gql`
         id
         name
         avatar {
-          url
+          ...imageUrls
         }
       }
     }
@@ -23,6 +26,8 @@ export const createRoom = () => gql`
 `
 
 export const roomQuery = () => gql`
+  ${imageUrls}
+
   query Room($first: Int, $offset: Int, $id: ID) {
     Room(first: $first, offset: $offset, id: $id, orderBy: [createdAt_desc, lastMessageAt_desc]) {
       id
@@ -49,7 +54,7 @@ export const roomQuery = () => gql`
         id
         name
         avatar {
-          url
+          ...imageUrls
         }
       }
     }

webapp/graphql/Search.js

@@ -1,15 +1,14 @@
 import gql from 'graphql-tag'
-import {
+import { user } from './fragments/user'
-  userFragment,
+import { post } from './fragments/post'
-  postFragment,
+import { group } from './fragments/group'
-  groupFragment,
+import { tagsCategoriesAndPinned } from './fragments/tagsCategoriesAndPinned'
-  tagsCategoriesAndPinnedFragment,
+import { imageUrls } from './fragments/imageUrls'
-} from './Fragments'
 
 export const searchQuery = gql`
-  ${userFragment}
+  ${user}
-  ${postFragment}
+  ${post}
-  ${groupFragment}
+  ${group}
 
   query ($query: String!) {
     searchResults(query: $query, limit: 5) {
@@ -38,9 +37,9 @@ export const searchQuery = gql`
 `
 
 export const searchPosts = gql`
-  ${userFragment}
+  ${user}
-  ${postFragment}
+  ${post}
-  ${tagsCategoriesAndPinnedFragment}
+  ${tagsCategoriesAndPinned}
 
   query ($query: String!, $firstPosts: Int, $postsOffset: Int) {
     searchPosts(query: $query, firstPosts: $firstPosts, postsOffset: $postsOffset) {
@@ -74,6 +73,8 @@ export const searchPosts = gql`
 export const searchGroups = (i18n) => {
   const lang = i18n ? i18n.locale().toUpperCase() : 'EN'
   return gql`
+    ${imageUrls}
+
     query ($query: String!, $firstGroups: Int, $groupsOffset: Int) {
       searchGroups(query: $query, firstGroups: $firstGroups, groupsOffset: $groupsOffset) {
         groupCount
@@ -98,7 +99,7 @@ export const searchGroups = (i18n) => {
             icon
          }
           avatar {
-            url
+            ...imageUrls
           }
           locationName
           location {
@@ -112,7 +113,7 @@ export const searchGroups = (i18n) => {
 }
 
 export const searchUsers = gql`
-  ${userFragment}
+  ${user}
 
   query ($query: String!, $firstUsers: Int, $usersOffset: Int) {
     searchUsers(query: $query, firstUsers: $firstUsers, usersOffset: $usersOffset) {

webapp/graphql/User.js

@@ -1,22 +1,20 @@
 import gql from 'graphql-tag'
-import {
+import { badges } from './fragments/badges'
-  userCountsFragment,
+import { location } from './fragments/location'
-  locationFragment,
+import { userCounts } from './fragments/userCounts'
-  badgesFragment,
+import { user } from './fragments/user'
-  userFragment,
+import { post } from './fragments/post'
-  postFragment,
+import { comment } from './fragments/comment'
-  commentFragment,
+import { group } from './fragments/group'
-  groupFragment,
+import { imageUrls } from './fragments/imageUrls'
-  userTeaserFragment,
-} from './Fragments'
 
 export const profileUserQuery = (i18n) => {
   const lang = i18n.locale().toUpperCase()
   return gql`
-    ${userFragment}
+    ${user}
-    ${userCountsFragment}
+    ${userCounts}
-    ${locationFragment('User', lang)}
+    ${location('User', lang)}
-    ${badgesFragment}
+    ${badges}
 
     query User($id: ID!, $followedByCount: Int!, $followingCount: Int!) {
       User(id: $id) {
@@ -54,13 +52,15 @@ export const profileUserQuery = (i18n) => {
 
 export const minimisedUserQuery = () => {
   return gql`
+    ${imageUrls}
+
     query ($slug: String) {
       User(slug: $slug, orderBy: slug_asc) {
         id
         slug
         name
         avatar {
-          url
+          ...imageUrls
         }
       }
     }
@@ -111,9 +111,9 @@ export const adminUserBadgesQuery = () => {
 export const mapUserQuery = (i18n) => {
   const lang = i18n.locale().toUpperCase()
   return gql`
-    ${userFragment}
+    ${user}
-    ${locationFragment('User', lang)}
+    ${location('User', lang)}
-    ${badgesFragment}
+    ${badges}
 
     query {
       User {
@@ -128,10 +128,10 @@ export const mapUserQuery = (i18n) => {
 
 export const notificationQuery = () => {
   return gql`
-    ${userFragment}
+    ${user}
-    ${commentFragment}
+    ${comment}
-    ${postFragment}
+    ${post}
-    ${groupFragment}
+    ${group}
 
     query ($read: Boolean, $orderBy: NotificationOrdering, $first: Int, $offset: Int) {
       notifications(read: $read, orderBy: $orderBy, first: $first, offset: $offset) {
@@ -177,10 +177,10 @@ export const notificationQuery = () => {
 
 export const markAsReadMutation = (_i18n) => {
   return gql`
-    ${userFragment}
+    ${user}
-    ${commentFragment}
+    ${comment}
-    ${postFragment}
+    ${post}
-    ${groupFragment}
+    ${group}
 
     mutation ($id: ID!) {
       markAsRead(id: $id) {
@@ -217,10 +217,10 @@ export const markAsReadMutation = (_i18n) => {
 
 export const markAllAsReadMutation = (_i18n) => {
   return gql`
-    ${userFragment}
+    ${user}
-    ${commentFragment}
+    ${comment}
-    ${postFragment}
+    ${post}
-    ${groupFragment}
+    ${group}
 
     mutation {
       markAllAsRead {
@@ -257,10 +257,10 @@ export const markAllAsReadMutation = (_i18n) => {
 
 export const notificationAdded = () => {
   return gql`
-    ${userFragment}
+    ${user}
-    ${commentFragment}
+    ${comment}
-    ${postFragment}
+    ${post}
-    ${groupFragment}
+    ${group}
 
     subscription notifications {
       notificationAdded {
@@ -305,8 +305,8 @@ export const notificationAdded = () => {
 }
 export const followUserMutation = (i18n) => {
   return gql`
-    ${userFragment}
+    ${user}
-    ${userCountsFragment}
+    ${userCounts}
 
     mutation ($id: ID!) {
       followUser(id: $id) {
@@ -325,8 +325,8 @@ export const followUserMutation = (i18n) => {
 
 export const unfollowUserMutation = (i18n) => {
   return gql`
-    ${userFragment}
+    ${user}
-    ${userCountsFragment}
+    ${userCounts}
 
     mutation ($id: ID!) {
       unfollowUser(id: $id) {
@@ -345,6 +345,8 @@ export const unfollowUserMutation = (i18n) => {
 
 export const updateUserMutation = () => {
   return gql`
+    ${imageUrls}
+
     mutation (
       $id: ID!
       $slug: String
@@ -386,7 +388,7 @@ export const updateUserMutation = () => {
         locale
         termsAndConditionsAgreedVersion
         avatar {
-          url
+          ...imageUrls
         }
         badgeVerification {
           id
@@ -407,7 +409,7 @@ export const checkSlugAvailableQuery = gql`
 `
 
 export const currentUserQuery = gql`
-  ${userFragment}
+  ${user}
   query {
     currentUser {
       ...user
@@ -461,7 +463,7 @@ export const currentUserQuery = gql`
 `
 
 export const currentUserCountQuery = () => gql`
-  ${userCountsFragment}
+  ${userCounts}
   query {
     currentUser {
       ...userCounts
@@ -471,9 +473,9 @@ export const currentUserCountQuery = () => gql`
 
 export const userDataQuery = (i18n) => {
   return gql`
-    ${userFragment}
+    ${user}
-    ${postFragment}
+    ${post}
-    ${commentFragment}
+    ${comment}
     query ($id: ID!) {
       userData(id: $id) {
         user {
@@ -501,10 +503,16 @@ export const userDataQuery = (i18n) => {
 export const userTeaserQuery = (i18n) => {
   const lang = i18n.locale().toUpperCase()
   return gql`
-    ${userTeaserFragment(lang)}
+    ${badges}
+    ${location('User', lang)}
+
     query ($id: ID!) {
       User(id: $id) {
-        ...userTeaser
+        followedByCount
+        contributionsCount
+        commentedCount
+        ...badges
+        ...location
       }
     }
   `

webapp/graphql/fragments/badges.js

@@ -0,0 +1,16 @@
+import gql from 'graphql-tag'
+
+export const badges = gql`
+  fragment badges on User {
+    badgeTrophiesSelected {
+      id
+      icon
+      description
+    }
+    badgeVerification {
+      id
+      icon
+      description
+    }
+  }
+`

webapp/graphql/fragments/comment.js

@@ -0,0 +1,17 @@
+import gql from 'graphql-tag'
+
+export const comment = gql`
+  fragment comment on Comment {
+    id
+    createdAt
+    updatedAt
+    disabled
+    deleted
+    content
+    contentExcerpt
+    isPostObservedByMe
+    postObservingUsersCount
+    shoutedByCurrentUser
+    shoutedCount
+  }
+`

webapp/graphql/fragments/group.js

@@ -0,0 +1,24 @@
+import gql from 'graphql-tag'
+
+export const group = gql`
+  fragment group on Group {
+    id
+    groupName: name
+    slug
+    disabled
+    deleted
+    about
+    description
+    descriptionExcerpt
+    groupType
+    actionRadius
+    categories {
+      id
+      slug
+      name
+      icon
+    }
+    locationName
+    myRole
+  }
+`

webapp/graphql/fragments/imageUrls.js

@@ -0,0 +1,10 @@
+import gql from 'graphql-tag'
+
+export const imageUrls = gql`
+  fragment imageUrls on Image {
+    url
+    w320: transform(width: 320)
+    w640: transform(width: 640)
+    w1024: transform(width: 1024)
+  }
+`

webapp/graphql/fragments/location.js

@@ -0,0 +1,14 @@
+import gql from 'graphql-tag'
+
+export const location = (type, lang) => gql`
+  fragment location on ${type} {
+    locationName
+    location {
+      id
+      name: name${lang}
+      lng
+      lat
+      distanceToMe
+    }
+  }
+`

webapp/graphql/fragments/post.js

@@ -0,0 +1,33 @@
+import gql from 'graphql-tag'
+import { imageUrls } from './imageUrls'
+
+export const post = gql`
+  ${imageUrls}
+
+  fragment post on Post {
+    id
+    title
+    content
+    contentExcerpt
+    createdAt
+    updatedAt
+    sortDate
+    disabled
+    deleted
+    slug
+    language
+    image {
+      ...imageUrls
+      sensitive
+      aspectRatio
+      type
+    }
+    author {
+      ...user
+    }
+    pinnedAt
+    pinned
+    isObservedByMe
+    observingUsersCount
+  }
+`

webapp/graphql/fragments/postCounts.js

@@ -0,0 +1,13 @@
+import gql from 'graphql-tag'
+
+export const postCounts = gql`
+  fragment postCounts on Post {
+    commentsCount
+    shoutedCount
+    shoutedByCurrentUser
+    emotionsCount
+    clickedCount
+    viewedTeaserCount
+    viewedTeaserByCurrentUser
+  }
+`

webapp/graphql/fragments/tagsCategoriesAndPinned.js

@@ -0,0 +1,20 @@
+import gql from 'graphql-tag'
+
+export const tagsCategoriesAndPinned = gql`
+  fragment tagsCategoriesAndPinned on Post {
+    tags {
+      id
+    }
+    categories {
+      id
+      slug
+      name
+      icon
+    }
+    pinnedBy {
+      id
+      name
+      role
+    }
+  }
+`

webapp/graphql/fragments/user.js

@@ -0,0 +1,16 @@
+import gql from 'graphql-tag'
+import { imageUrls } from './imageUrls'
+
+export const user = gql`
+  ${imageUrls}
+  fragment user on User {
+    id
+    slug
+    name
+    avatar {
+      ...imageUrls
+    }
+    disabled
+    deleted
+  }
+`

webapp/graphql/fragments/userCounts.js

@@ -0,0 +1,12 @@
+import gql from 'graphql-tag'
+
+export const userCounts = gql`
+  fragment userCounts on User {
+    shoutedCount
+    contributionsCount
+    commentedCount
+    followedByCount
+    followingCount
+    followedByCurrentUser
+  }
+`

webapp/graphql/groups.js

@@ -1,5 +1,6 @@
 import gql from 'graphql-tag'
-import { locationFragment } from './Fragments'
+import { location } from './fragments/location'
+import { imageUrls } from './fragments/imageUrls'
 
 // ------ mutations
 
@@ -54,6 +55,8 @@ export const createGroupMutation = () => {
 
 export const updateGroupMutation = () => {
   return gql`
+    ${imageUrls}
+
     mutation (
       $id: ID!
       $name: String
@@ -95,7 +98,7 @@ export const updateGroupMutation = () => {
           icon
         }
         avatar {
-          url
+          ...imageUrls
         }
         locationName
         myRole
@@ -161,7 +164,9 @@ export const removeUserFromGroupMutation = () => {
 export const groupQuery = (i18n) => {
   const lang = i18n ? i18n.locale().toUpperCase() : 'EN'
   return gql`
-    ${locationFragment('Group', lang)}
+    ${location('Group', lang)}
+    ${imageUrls}
+
     query ($isMember: Boolean, $id: ID, $slug: String, $first: Int, $offset: Int) {
       Group(isMember: $isMember, id: $id, slug: $slug, first: $first, offset: $offset) {
         id
@@ -184,10 +189,7 @@ export const groupQuery = (i18n) => {
           icon
         }
         avatar {
-          url
+          ...imageUrls
-          w320: transform(width: 320)
-          w640: transform(width: 640)
-          w1024: transform(width: 1024)
         }
         ...location
         membersCount
@@ -209,6 +211,8 @@ export const groupQuery = (i18n) => {
 
 export const groupMembersQuery = () => {
   return gql`
+    ${imageUrls}
+
     query ($id: ID!, $first: Int, $offset: Int) {
       GroupMembers(id: $id, first: $first, offset: $offset) {
         id
@@ -216,10 +220,7 @@ export const groupMembersQuery = () => {
         slug
         myRoleInGroup
         avatar {
-          url
+          ...imageUrls
-          w320: transform(width: 320)
-          w640: transform(width: 640)
-          w1024: transform(width: 1024)
         }
       }
     }

webapp/graphql/settings/BlockedUsers.js

@@ -1,14 +1,17 @@
 import gql from 'graphql-tag'
+import { imageUrls } from '../fragments/imageUrls'
 
 export const blockedUsers = () => {
   return gql`
-    {
+    ${imageUrls}
+
+    query {
       blockedUsers {
         id
         name
         slug
         avatar {
-          url
+          ...imageUrls
         }
         about
         disabled

webapp/graphql/settings/MutedUsers.js

@@ -1,14 +1,17 @@
 import gql from 'graphql-tag'
+import { imageUrls } from '../fragments/imageUrls'
 
 export const mutedUsers = () => {
   return gql`
-    {
+    ${imageUrls}
+
+    query {
       mutedUsers {
         id
         name
         slug
         avatar {
-          url
+          ...imageUrls
         }
         about
         disabled