Debugging

frontend/src/features/vehicles/hooks/useVehicles.ts

@@ -2,6 +2,7 @@
  * @ai-summary React hooks for vehicles feature
  */
 
+import React from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useAuth0 } from '@auth0/auth0-react';
 import { vehiclesApi } from '../api/vehicles.api';
@@ -22,7 +23,7 @@ export const useVehicles = () => {
 
   console.log('[useVehicles] Hook called - isAuthenticated:', isAuthenticated, 'isLoading:', isLoading);
 
-  return useQuery({
+  const query = useQuery({
     queryKey: ['vehicles'],
     queryFn: () => {
       console.log('[useVehicles] Query function called - fetching vehicles');
@@ -42,13 +43,19 @@ export const useVehicles = () => {
     retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
     refetchOnWindowFocus: false, // Prevent refetch on window focus
     refetchOnMount: false, // Only fetch on mount if data is stale
-    onSuccess: (data) => {
-      console.log('[useVehicles] Query success - vehicles loaded:', data?.length);
-    },
-    onError: (error) => {
-      console.log('[useVehicles] Query error:', error);
-    },
   });
+
+  // Handle success/error with useEffect instead of deprecated callbacks
+  React.useEffect(() => {
+    if (query.data) {
+      console.log('[useVehicles] Query success - vehicles loaded:', Array.isArray(query.data) ? query.data.length : 0);
+    }
+    if (query.error) {
+      console.log('[useVehicles] Query error:', query.error);
+    }
+  }, [query.data, query.error]);
+
+  return query;
 };
 
 export const useVehicle = (id: string) => {