refactor graphl queries to load only what is really needed

admin/src/components/ContributionMessages/ContributionMessagesList.spec.js

@@ -68,6 +68,16 @@ const defaultData = {
   },
 }
 
+const defaultUser = {
+  firstName: 'Peter',
+  lastName: 'Lustig',
+  humhubUsername: 'peter.lustig',
+  createdAt: new Date().toString(),
+  emailContact: {
+    email: 'peter.lustig@example.com',
+  },
+}
+
 describe('ContributionMessagesList', () => {
   let wrapper
   let mockMessages
@@ -98,6 +108,7 @@ describe('ContributionMessagesList', () => {
           memo: 'test memo',
           userId: 108,
           status: 'PENDING',
+          user: defaultUser,
         },
         hideResubmission: true,
       },
@@ -139,7 +150,12 @@ describe('ContributionMessagesList', () => {
   })
 
   it('does not render the ContributionMessagesFormular when status is not PENDING or IN_PROGRESS', async () => {
-    await wrapper.setProps({ contribution: { status: 'COMPLETED' } })
+    await wrapper.setProps({
+      contribution: {
+        status: 'COMPLETED',
+        user: defaultUser,
+      },
+    })
     expect(wrapper.find('contribution-messages-formular-stub').exists()).toBe(false)
   })
 

admin/src/components/ContributionMessages/ContributionMessagesList.vue

@@ -3,16 +3,16 @@
     <BListGroup>
       <BListGroupItem>
         <routerLink :to="searchLink" :title="$t('goTo.userSearch')">
-          {{ contribution.firstName }} {{ contribution.lastName }}
+          {{ contribution.user.firstName }} {{ contribution.user.lastName }}
         </routerLink>
         &nbsp;
-        <a :href="mailtoLink">{{ contribution.email }}</a>
+        <a :href="mailtoLink">{{ contribution.user.emailContact.email }}</a>
         <IBiFilter id="filter-by-email" class="ms-1 pointer" @click="searchForEmail" />
         <BTooltip target="filter-by-email" triggers="hover">
           {{ $t('filter.byEmail') }}
         </BTooltip>
         &nbsp;
-        {{ contribution.username }}
+        {{ contribution.user.humhubUsername }}
         &nbsp;
         <span>
           <a
@@ -29,7 +29,7 @@
         </span>
       </BListGroupItem>
       <BListGroupItem>
-        {{ $t('registered') }}: {{ new Date(contribution.createdAt).toLocaleString() }}
+        {{ $t('registered') }}: {{ new Date(contribution.user.createdAt).toLocaleString() }}
       </BListGroupItem>
     </BListGroup>
     <BContainer>

admin/src/components/CreationTransactionList.spec.js

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils'
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 import CreationTransactionList from './CreationTransactionList.vue'
 import { useQuery } from '@vue/apollo-composable'
-import { adminListContributions } from '../graphql/adminListContributions'
+import { adminListContributionsShort } from '../graphql/adminListContributions.graphql'
 import { useI18n } from 'vue-i18n'
 import { useAppToast } from '@/composables/useToast'
 
@@ -65,13 +65,17 @@ describe('CreationTransactionList', () => {
   it('calls useQuery with correct parameters', () => {
     expect(useQuery).toHaveBeenCalled()
     const call = useQuery.mock.calls[0]
-    expect(call[0]).toBe(adminListContributions)
+    expect(call[0]).toBe(adminListContributionsShort)
     expect(call[1]).toEqual(
       expect.objectContaining({
-        currentPage: expect.any(Number),
-        pageSize: expect.any(Number),
-        order: 'DESC',
-        userId: 1,
+        filter: {
+          userId: 1,
+        },
+        paginated: {
+          currentPage: expect.any(Number),
+          pageSize: expect.any(Number),
+          order: 'DESC',
+        },
       }),
     )
   })

admin/src/components/CreationTransactionList.vue

@@ -45,7 +45,7 @@
 <script setup>
 import { ref, watch } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
-import { adminListContributions } from '../graphql/adminListContributions'
+import { adminListContributionsShort } from '../graphql/adminListContributions.graphql'
 import { BTable, BPagination, BButton, BCollapse, vBToggle } from 'bootstrap-vue-next'
 import { useI18n } from 'vue-i18n'
 
@@ -93,11 +93,15 @@ const fields = [
   { key: 'memo', label: t('transactionlist.memo'), class: 'text-break' },
 ]
 
-const { result, refetch } = useQuery(adminListContributions, {
-  currentPage: currentPage.value,
-  pageSize: perPage.value,
-  order: 'DESC',
-  userId: props.userId,
+const { result, refetch } = useQuery(adminListContributionsShort, {
+  filter: {
+    userId: props.userId,
+  },
+  paginated: {
+    currentPage: currentPage.value,
+    pageSize: perPage.value,
+    order: 'DESC',
+  },
 })
 
 watch(result, (newResult) => {

admin/src/graphql/adminListContributions.graphql

@@ -0,0 +1,73 @@
+#import './fragments.graphql'
+
+query adminListContributions(
+  $filter: SearchContributionsFilterArgs!
+  $paginated: Paginated
+) {
+  adminListContributions(
+    paginated: $paginated,
+    filter: $filter
+  ) {
+    contributionCount
+    contributionList {
+      id
+      user {
+        emailContact {
+          email
+        }
+        ...UserCommonFields
+        humhubUsername
+        createdAt
+      }
+      amount
+      memo
+      createdAt
+      contributionDate
+      confirmedAt
+      confirmedBy
+      updatedAt
+      updatedBy
+      status
+      messagesCount
+      deniedAt
+      deniedBy
+      deletedAt
+      deletedBy
+      moderatorId
+      userId
+      resubmissionAt
+    }
+  }
+}
+
+query adminListContributionsShort(
+  $filter: SearchContributionsFilterArgs!
+  $paginated: Paginated
+) {
+  adminListContributions(
+    paginated: $paginated,
+    filter: $filter
+  ) {
+    contributionCount
+    contributionList {
+      id
+      amount
+      memo
+      createdAt
+      contributionDate
+      confirmedAt
+      status
+    }
+  }
+}
+
+
+query adminListContributionsCount(
+  $filter: SearchContributionsFilterArgs!
+) {
+  adminListContributions(
+    filter: $filter
+  ) {
+    contributionCount
+  }
+}

admin/src/graphql/adminListContributions.js

@@ -1,52 +0,0 @@
-import gql from 'graphql-tag'
-
-export const adminListContributions = gql`
-  query (
-    $currentPage: Int = 1
-    $pageSize: Int = 25
-    $order: Order = DESC
-    $statusFilter: [ContributionStatus!]
-    $userId: Int
-    $query: String
-    $noHashtag: Boolean
-    $hideResubmission: Boolean
-  ) {
-    adminListContributions(
-      currentPage: $currentPage
-      pageSize: $pageSize
-      order: $order
-      statusFilter: $statusFilter
-      userId: $userId
-      query: $query
-      noHashtag: $noHashtag
-      hideResubmission: $hideResubmission
-    ) {
-      contributionCount
-      contributionList {
-        id
-        firstName
-        lastName
-        email
-        username
-        humhubUsername
-        amount
-        memo
-        createdAt
-        contributionDate
-        confirmedAt
-        confirmedBy
-        updatedAt
-        updatedBy
-        status
-        messagesCount
-        deniedAt
-        deniedBy
-        deletedAt
-        deletedBy
-        moderatorId
-        userId
-        resubmissionAt
-      }
-    }
-  }
-`

admin/src/graphql/fragments.graphql

@@ -26,4 +26,11 @@ fragment AiChatMessageFields on ChatGptMessage {
   content
   role
   threadId
-}
+}
+
+fragment UserCommonFields on User {
+  id
+  firstName
+  lastName
+  alias
+}

admin/src/pages/CreationConfirm.vue

@@ -102,7 +102,7 @@ import Overlay from '../components/Overlay'
 import OpenCreationsTable from '../components/Tables/OpenCreationsTable'
 import UserQuery from '../components/UserQuery'
 import AiChat from '../components/AiChat'
-import { adminListContributions } from '../graphql/adminListContributions'
+import { adminListContributions } from '../graphql/adminListContributions.graphql'
 import { adminDeleteContribution } from '../graphql/adminDeleteContribution'
 import { confirmContribution } from '../graphql/confirmContribution'
 import { denyContribution } from '../graphql/denyContribution'
@@ -320,12 +320,17 @@ watch(tabIndex, () => {
 const { onResult, onError, result, refetch } = useQuery(
   adminListContributions,
   {
-    currentPage: currentPage.value,
-    pageSize: pageSize.value,
-    statusFilter: statusFilter.value,
-    query: query.value,
-    noHashtag: noHashtag.value,
-    hideResubmission: hideResubmission.value,
+    filter: {
+      statusFilter: statusFilter.value,
+      query: query.value,
+      noHashtag: noHashtag.value,
+      hideResubmission: hideResubmission.value,
+    },
+    paginated: {
+      currentPage: currentPage.value,
+      pageSize: pageSize.value,
+      order: 'DESC',
+    },
   },
   {
     fetchPolicy: 'no-cache',

admin/src/pages/Overview.spec.js

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils'
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
 import Overview from './Overview.vue'
-import { adminListContributions } from '@/graphql/adminListContributions'
+import { adminListContributionsCount } from '@/graphql/adminListContributions.graphql'
 import { useQuery } from '@vue/apollo-composable'
 import { createStore } from 'vuex'
 import { useAppToast } from '@/composables/useToast'
@@ -72,9 +72,11 @@ describe('Overview', () => {
   }
 
   it('calls useQuery with correct parameters', () => {
-    expect(useQuery).toHaveBeenCalledWith(adminListContributions, {
-      statusFilter: ['IN_PROGRESS', 'PENDING'],
-      hideResubmission: true,
+    expect(useQuery).toHaveBeenCalledWith(adminListContributionsCount, {
+      filter: {
+        statusFilter: ['IN_PROGRESS', 'PENDING'],
+        hideResubmission: true,
+      },
     })
   })
 

admin/src/pages/Overview.vue

@@ -17,7 +17,7 @@
   </div>
 </template>
 <script setup>
-import { adminListContributions } from '@/graphql/adminListContributions'
+import { adminListContributionsCount } from '@/graphql/adminListContributions.graphql'
 import { ref, computed } from 'vue'
 import { useStore } from 'vuex'
 import { useQuery } from '@vue/apollo-composable'
@@ -33,9 +33,11 @@ const { t } = useI18n()
 
 const { toastError } = useAppToast()
 
-const { result, onResult, onError } = useQuery(adminListContributions, {
-  statusFilter: statusFilter.value,
-  hideResubmission: true,
+const { result, onResult, onError } = useQuery(adminListContributionsCount, {
+  filter: {
+    statusFilter: statusFilter.value,
+    hideResubmission: true,
+  },
 })
 
 onResult(({ data }) => {