Refactor: Implement API and cache improvements

src/components/parks/ParkCard.tsx

@@ -19,36 +19,42 @@ export function ParkCard({ park }: ParkCardProps) {
     navigate(`/parks/${park.slug}`);
   };
   
-  // Prefetch park detail data on hover
+  // Smart prefetch - only if not already cached
   const handleMouseEnter = () => {
-    // Prefetch park detail page data
-    queryClient.prefetchQuery({
-      queryKey: queryKeys.parks.detail(park.slug),
-      queryFn: async () => {
-        const { data } = await supabase
-          .from('parks')
-          .select('*')
-          .eq('slug', park.slug)
-          .single();
-        return data;
-      },
-      staleTime: 5 * 60 * 1000,
-    });
+    // Check if already cached before prefetching
+    const detailCached = queryClient.getQueryData(queryKeys.parks.detail(park.slug));
+    const photosCached = queryClient.getQueryData(queryKeys.photos.entity('park', park.id));
     
-    // Prefetch park photos (first 10)
-    queryClient.prefetchQuery({
-      queryKey: queryKeys.photos.entity('park', park.id),
-      queryFn: async () => {
-        const { data } = await supabase
-          .from('photos')
-          .select('*')
-          .eq('entity_type', 'park')
-          .eq('entity_id', park.id)
-          .limit(10);
-        return data;
-      },
-      staleTime: 5 * 60 * 1000,
-    });
+    if (!detailCached) {
+      queryClient.prefetchQuery({
+        queryKey: queryKeys.parks.detail(park.slug),
+        queryFn: async () => {
+          const { data } = await supabase
+            .from('parks')
+            .select('*')
+            .eq('slug', park.slug)
+            .single();
+          return data;
+        },
+        staleTime: 5 * 60 * 1000,
+      });
+    }
+    
+    if (!photosCached) {
+      queryClient.prefetchQuery({
+        queryKey: queryKeys.photos.entity('park', park.id),
+        queryFn: async () => {
+          const { data } = await supabase
+            .from('photos')
+            .select('*')
+            .eq('entity_type', 'park')
+            .eq('entity_id', park.id)
+            .limit(10);
+          return data;
+        },
+        staleTime: 5 * 60 * 1000,
+      });
+    }
   };
   const getStatusColor = (status: string) => {
     switch (status) {