upgrade inertia v2; add prefetching; migrate queries to tanstack query

vue

resources/js/utils/useMembers.ts

@@ -1,31 +1,15 @@
 import { defineStore } from 'pinia';
 import { api } from '@/packages/api/src';
-import { computed, ref } from 'vue';
-import type { Member, MemberIndexResponse, UpdateMemberBody } from '@/packages/api/src';
+import type { UpdateMemberBody } from '@/packages/api/src';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { useNotificationsStore } from '@/utils/notification';
+import { useQueryClient } from '@tanstack/vue-query';
 
 export type MemberBillableKey = 'default-rate' | 'custom-rate';
 
 export const useMembersStore = defineStore('members', () => {
-    const membersResponse = ref<MemberIndexResponse | null>(null);
     const { handleApiRequestNotifications } = useNotificationsStore();
-
-    async function fetchMembers() {
-        const organization = getCurrentOrganizationId();
-        if (organization) {
-            membersResponse.value = await handleApiRequestNotifications(
-                () =>
-                    api.getMembers({
-                        params: {
-                            organization: organization,
-                        },
-                    }),
-                undefined,
-                'Failed to fetch members'
-            );
-        }
-    }
+    const queryClient = useQueryClient();
 
     async function removeMember(membershipId: string) {
         const organization = getCurrentOrganizationId();
@@ -41,7 +25,7 @@ export const useMembersStore = defineStore('members', () => {
                 'Member deleted successfully',
                 'Failed to delete member'
             );
-            await fetchMembers();
+            queryClient.invalidateQueries({ queryKey: ['members'] });
         }
     }
 
@@ -59,13 +43,9 @@ export const useMembersStore = defineStore('members', () => {
                 'Member updated successfully',
                 'Failed to update member'
             );
-            await fetchMembers();
+            queryClient.invalidateQueries({ queryKey: ['members'] });
         }
     }
 
-    const members = computed<Member[]>(() => {
-        return membersResponse.value?.data || [];
-    });
-
-    return { members, fetchMembers, removeMember, updateMember };
+    return { removeMember, updateMember };
 });