Implement cache management

src/hooks/photos/useEntityPhotos.ts

@@ -26,7 +26,8 @@
  * ```
  */
 
-import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import { useQuery, UseQueryResult, useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
 import { supabase } from '@/integrations/supabase/client';
 import { queryKeys } from '@/lib/queryKeys';
 
@@ -42,9 +43,12 @@ interface EntityPhoto {
 export function useEntityPhotos(
   entityType: string, 
   entityId: string,
-  sortBy: 'newest' | 'oldest' = 'newest'
+  sortBy: 'newest' | 'oldest' = 'newest',
+  enableRealtime = false // New parameter for opt-in real-time updates
 ): UseQueryResult<EntityPhoto[]> {
-  return useQuery({
+  const queryClient = useQueryClient();
+  
+  const query = useQuery({
     queryKey: queryKeys.photos.entity(entityType, entityId, sortBy),
     queryFn: async () => {
       const startTime = performance.now();
@@ -82,4 +86,34 @@ export function useEntityPhotos(
     gcTime: 15 * 60 * 1000,
     refetchOnWindowFocus: false,
   });
+  
+  // Real-time subscription for photo uploads (opt-in)
+  useEffect(() => {
+    if (!enableRealtime || !entityType || !entityId) return;
+    
+    const channel = supabase
+      .channel(`photos-${entityType}-${entityId}`)
+      .on(
+        'postgres_changes',
+        {
+          event: 'INSERT',
+          schema: 'public',
+          table: 'photos',
+          filter: `entity_type=eq.${entityType},entity_id=eq.${entityId}`,
+        },
+        (payload) => {
+          console.log('📸 New photo uploaded:', payload.new);
+          queryClient.invalidateQueries({ 
+            queryKey: queryKeys.photos.entity(entityType, entityId) 
+          });
+        }
+      )
+      .subscribe();
+    
+    return () => {
+      supabase.removeChannel(channel);
+    };
+  }, [enableRealtime, entityType, entityId, queryClient, sortBy]);
+  
+  return query;
 }