Refactor: Optimize user role fetching

src/lib/queryInvalidation.ts

@@ -0,0 +1,72 @@
+/**
+ * Query invalidation helpers for TanStack Query
+ * 
+ * Use these helpers to invalidate cached queries when data changes.
+ * This ensures UI stays in sync with backend state.
+ */
+
+import { useQueryClient } from '@tanstack/react-query';
+import { queryKeys } from './queryKeys';
+
+/**
+ * Hook providing query invalidation helpers
+ */
+export function useQueryInvalidation() {
+  const queryClient = useQueryClient();
+
+  return {
+    /**
+     * Invalidate user roles cache
+     * Call this after assigning/revoking roles
+     */
+    invalidateUserRoles: (userId?: string) => {
+      if (userId) {
+        queryClient.invalidateQueries({ queryKey: queryKeys.userRoles(userId) });
+      } else {
+        queryClient.invalidateQueries({ queryKey: ['user-roles'] });
+      }
+    },
+
+    /**
+     * Invalidate user permissions cache
+     * Call this after role changes that affect permissions
+     */
+    invalidateUserPermissions: (userId?: string) => {
+      if (userId) {
+        queryClient.invalidateQueries({ queryKey: queryKeys.userPermissions(userId) });
+      } else {
+        queryClient.invalidateQueries({ queryKey: ['user-permissions'] });
+      }
+    },
+
+    /**
+     * Invalidate both roles and permissions for a user
+     * Use this as a convenience method after role updates
+     */
+    invalidateUserAuth: (userId?: string) => {
+      if (userId) {
+        queryClient.invalidateQueries({ queryKey: queryKeys.userRoles(userId) });
+        queryClient.invalidateQueries({ queryKey: queryKeys.userPermissions(userId) });
+      } else {
+        queryClient.invalidateQueries({ queryKey: ['user-roles'] });
+        queryClient.invalidateQueries({ queryKey: ['user-permissions'] });
+      }
+    },
+
+    /**
+     * Invalidate moderation queue
+     * Call this after moderation actions
+     */
+    invalidateModerationQueue: () => {
+      queryClient.invalidateQueries({ queryKey: ['moderation-queue'] });
+    },
+
+    /**
+     * Invalidate moderation stats
+     * Call this after queue changes
+     */
+    invalidateModerationStats: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.moderationStats() });
+    },
+  };
+}

src/lib/queryKeys.ts

@@ -0,0 +1,18 @@
+/**
+ * Centralized query key definitions for TanStack Query
+ * 
+ * This ensures consistent query keys across the application
+ * and makes cache invalidation easier to manage.
+ */
+
+export const queryKeys = {
+  // User-related queries
+  userRoles: (userId?: string) => ['user-roles', userId] as const,
+  userPermissions: (userId?: string) => ['user-permissions', userId] as const,
+  
+  // Moderation queue queries
+  moderationQueue: (config: Record<string, any>) => ['moderation-queue', config] as const,
+  moderationStats: () => ['moderation-stats'] as const,
+  
+  // Add more query keys as needed
+} as const;