Added an apollo query (THANK U INDIGO). Didnt need to add all of the other stupid stuff like an apollo library or anything.

17th Website/src/views/users.vue

@@ -2,12 +2,12 @@
 import { ref } from 'vue'
 import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
 import { Icon } from '@iconify/vue'
+import QueryApolloGraphQL from '../api/request'
 
 export default {
     data() {
         return {
-            parentMessage: 'Parent',
-            items: [{ message: 'Foo' }, { message: 'Bar' }],
+            items: [],
             dropped: false,
             search: '',
 
@@ -49,9 +49,11 @@ export default {
         ListboxOptions,
         Icon,
     },
+    mounted() {
+        QueryApolloGraphQL("getPageViewMemberRankStatusAll", "query Query {getPageViewMemberRankStatusAll {items {member_name,rank,status}}}").then(value => { console.log(value); this.items = value})
+    }
 }
 
-// const unitFilter = ref(unitFilters[1])
 </script>
 
 <template>
@@ -129,9 +131,9 @@ export default {
         </thead>
         <tbody id="tableBody">
             <tr v-for="(item, index) in items">
-                <td>{{ parentMessage }}</td>
-                <td>{{ index }}</td>
-                <td>{{ item.message }}</td>
+                <td>{{ item.member_name }}</td>
+                <td>{{ item.status }}</td>
+                <td>{{ item.rank }}</td>
             </tr>
         </tbody>
     </table>