From e5acca7329fc9b121f3c6f81d4abffb271caf84b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sun, 25 Sep 2022 13:23:21 +0200
Subject: [PATCH] Use Vue Apollo automatic fetching in 'members.vue'

---
 webapp/pages/group/edit/_id/members.vue | 41 +++++++++++++------------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/webapp/pages/group/edit/_id/members.vue b/webapp/pages/group/edit/_id/members.vue
index bc651b834..94b489871 100644
--- a/webapp/pages/group/edit/_id/members.vue
+++ b/webapp/pages/group/edit/_id/members.vue
@@ -3,7 +3,7 @@
     <base-card>
       <ds-heading tag="h3">{{ $t('group.members') }}</ds-heading>
       <ds-space margin="large" />
-      <group-member :groupId="group.id" :groupMembers="responseGroupMembersQuery" />
+      <group-member :groupId="group.id" :groupMembers="groupMembers" />
     </base-card>
   </div>
 </template>
@@ -19,32 +19,35 @@ export default {
   props: {
     group: {
       type: Object,
-      required: false,
-      default: () => {},
+      required: true,
     },
   },
   data() {
     return {
-      responseGroupMembersQuery: [],
+      GroupMembers: [],
     }
   },
-  methods: {
-    async groupMembersQueryList() {
-      try {
-        const response = await this.$apollo.query({
-          query: groupMembersQuery(),
-          variables: { id: this.group.id },
-        })
-        this.responseGroupMembersQuery = response.data.GroupMembers
-      } catch (err) {
-        this.$toast.error(err.message)
-      } finally {
-        this.pending = false
-      }
+  computed: {
+    groupMembers() {
+      return this.GroupMembers ? this.GroupMembers : []
     },
   },
-  created() {
-    this.groupMembersQueryList()
+  apollo: {
+    GroupMembers: {
+      query() {
+        return groupMembersQuery()
+      },
+      variables() {
+        return {
+          id: this.group.id,
+        }
+      },
+      error(error) {
+        this.GroupMembers = []
+        this.$toast.error(error.message)
+      },
+      fetchPolicy: 'cache-and-network',
+    },
   },
 }
 </script>