ovh · tibs245 · Feb 9, 2026 · Feb 9, 2026
@@ -1,14 +1,15 @@
 import { Outlet, useNavigate } from 'react-router-dom';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
 import { Controller, SubmitHandler, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 
 import { OdsButton, OdsCombobox, OdsFormField } from '@ovhcloud/ods-components/react';
 
 import { BaremetalOption } from '@ovh-ux/backup-agent/components/CommonFields/BaremetalOption/BaremetalOption.component';
-import { useBaremetalsList } from '@ovh-ux/backup-agent/data/hooks/baremetal/useBaremetalsList';
+import { baremetalsQueries } from '@ovh-ux/backup-agent/data/queries/baremetals.queries';
 import { NAMESPACES } from '@ovh-ux/manager-common-translations';
 
 import { OnboardingDescription } from '@/components/onboarding/onboardingDescription/OnboardingDescription.component';
@@ -32,7 +33,7 @@ export default function FirstOrderPage() {
 
   const { productName, title } = useOnboardingContent();
   const img = useOnboardingHeroImage();
-  const { flattenData, isLoading } = useBaremetalsList();
+  const { data: baremetals, isPending: isLoading } = useQuery(baremetalsQueries.all());
   const navigate = useNavigate();
 
   const {
@@ -84,7 +85,7 @@ export default function FirstOrderPage() {
                   onOdsBlur={field.onBlur}
                   onOdsChange={field.onChange}
                 >
-                  {flattenData?.map(({ name, ip, iam: { displayName } }) => (
+                  {baremetals?.map(({ name, ip, iam: { displayName } }) => (
                     <BaremetalOption key={name} name={name} ip={ip} displayName={displayName} />
                   ))}
                 </OdsCombobox>

@@ -2,11 +2,12 @@ import { useEffect } from 'react';
 
 import { useNavigate } from 'react-router-dom';
 
+import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 
 import { OdsButton, OdsMessage, OdsModal, OdsSpinner } from '@ovhcloud/ods-components/react';
 
-import { useBaremetalDetails } from '@ovh-ux/backup-agent/data/hooks/baremetal/useBaremetalDetails';
+import { baremetalsQueries } from '@ovh-ux/backup-agent/data/queries/baremetals.queries';
 import { useRequiredParams } from '@ovh-ux/backup-agent/hooks/useRequiredParams';
 import { NAMESPACES } from '@ovh-ux/manager-common-translations';
 
@@ -27,9 +28,9 @@ const FirstOrderConfirmationModal = () => {
   const { baremetalName } = useRequiredParams('baremetalName');
 
   // Disable refetch to avoid creating multiple carts
-  const { data: baremetal, isPending: isBaremetalPending } = useBaremetalDetails({
-    serviceName: baremetalName,
-  });
+  const { data: baremetal, isPending: isBaremetalPending } = useQuery(
+    baremetalsQueries.detail(baremetalName),
+  );
 
   const {
     mutate: createCart,

@@ -2,13 +2,13 @@
 
 import { useSearchParams } from 'react-router-dom';
 
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { OdsMessage } from '@ovhcloud/ods-components/react';
 
-import { useBaremetalsList } from '@ovh-ux/backup-agent/data/hooks/baremetal/useBaremetalsList';
-import { useBackupVaultsListOptions } from '@ovh-ux/backup-agent/data/hooks/vaults/getVault';
+import { baremetalsQueries } from '@ovh-ux/backup-agent/data/queries/baremetals.queries';
+import { vaultsQueries } from '@ovh-ux/backup-agent/data/queries/vaults.queries';
 import { useGuideUtils } from '@ovh-ux/backup-agent/hooks/useGuideUtils.ts';
 import { urls as backupAgentUrls } from '@ovh-ux/backup-agent/routes/routes.constants';
 import { NAMESPACES } from '@ovh-ux/manager-common-translations';
@@ -26,15 +26,16 @@
   const { t } = useTranslation(['onboarding', NAMESPACES.ACTIONS, NAMESPACES.ONBOARDING]);
   const { productName, title, tiles } = useOnboardingContent();
   const links = useGuideUtils();
-  const { flattenData, isPending } = useBaremetalsList({ pageSize: 1 });
+  const queryClient = useQueryClient();
+  const { data: baremetals, isPending } = useQuery(baremetalsQueries.all());
   const isOrderSuccess = searchParams.get('orderSuccess') === 'true';
   const {
     data: isBackupAgentReady,
     isPending: isVaultPending,
     isSuccess: isVaultSuccess,
     isError: isVaultError,
   } = useQuery({
-    ...useBackupVaultsListOptions(),
+    ...vaultsQueries.withClient(queryClient).list(),
     retry: false,
     select: (vaults) =>
       vaults.filter(({ currentState: { status } }) => status === 'READY').length >= 1,
@@ -92,8 +93,8 @@
         isOrderLoading={isPending}
         orderHref={urls.firstOrder}
         moreInfoHref={links.website}
-        isOrderDisabled={!flattenData?.length || !isVaultError || isVaultPending || isOrderSuccess}
-        tooltipContent={!flattenData?.length ? t('no_baremetal_available') : undefined}
+        isOrderDisabled={!baremetals?.length || !isVaultError || isVaultPending || isOrderSuccess}
+        tooltipContent={!baremetals?.length ? t('no_baremetal_available') : undefined}
       >
         {validTiles.map(({ id, key, linkKey }) => {
           const href = links[linkKey];

@@ -30,33 +30,27 @@ vi.mock('react-i18next', () => ({
   }),
 }));
 
-const { useBaremetalsListMock, useQueryMock } = vi.hoisted(() => ({
-  useBaremetalsListMock: vi
-    .fn()
-    .mockReturnValue({ data: undefined, isPending: true, isError: false }),
+const { useQueryMock } = vi.hoisted(() => ({
   useQueryMock: vi.fn().mockReturnValue({ data: undefined, isPending: false, isError: false }),
 }));
 
 vi.mock('@tanstack/react-query', () => ({
   useQuery: useQueryMock,
+  useQueryClient: vi.fn(),
 }));
 
 vi.mock('@ovh-ux/manager-react-shell-client', async () => ({
   ...(await vi.importActual('@ovh-ux/manager-react-shell-client')),
   useNavigationGetUrl: vi.fn().mockReturnValue({ isPending: false, data: '' }),
 }));
 
-vi.mock('@ovh-ux/backup-agent/data/hooks/baremetal/useBaremetalsList', () => {
-  return {
-    useBaremetalsList: useBaremetalsListMock,
-  };
-});
+vi.mock('@ovh-ux/backup-agent/data/queries/baremetals.queries', () => ({
+  baremetalsQueries: { list: vi.fn() },
+}));
 
-vi.mock('@ovh-ux/backup-agent/data/hooks/vaults/getVault', () => {
-  return {
-    useBackupVaultsListOptions: vi.fn(),
-  };
-});
+vi.mock('@ovh-ux/backup-agent/data/queries/vaults.queries', () => ({
+  vaultsQueries: { withClient: vi.fn().mockReturnValue({ list: vi.fn() }) },
+}));
 
 // --- Mock manager-react-components ---
 interface OnboardingLayoutProps {
@@ -136,6 +130,7 @@ vi.mock('@ovh-ux/backup-agent/hooks/useGuideUtils.ts', () => ({
 
 describe('FirstOrderPage', () => {
   beforeAll(() => {
+    // useQuery is called twice: 1st for baremetals, 2nd for vaults
     useQueryMock.mockReturnValue({
       data: mockVaults,
       isPending: false,
@@ -171,16 +166,18 @@ describe('FirstOrderPage', () => {
   ])(
     'renders onboarding and expected disabled if no baremetal : $expectedDisabled',
     async (mock, expectedDisabled) => {
-      useBaremetalsListMock.mockReturnValue({
-        flattenData: mock,
-        isPending: false,
-        isError: false,
-      });
-      useQueryMock.mockReturnValue({
-        flattenData: undefined,
-        isPending: false,
-        isError: true,
-      });
+      // useQuery is called twice: 1st for baremetals, 2nd for vaults
+      useQueryMock
+        .mockReturnValueOnce({
+          data: mock,
+          isPending: false,
+          isError: false,
+        })
+        .mockReturnValueOnce({
+          data: undefined,
+          isPending: false,
+          isError: true,
+        });
 
       render(<OnboardingPage />);
 

@@ -21,20 +21,20 @@
       "import": "./dist/src/routes/routes.constants",
       "require": "./dist/src/routes/routes.constants.js"
     },
-    "./data/hooks/baremetal/useBaremetalsList": {
-      "types": "./dist/types/src/data/hooks/baremetal/useBaremetalsList.d.ts",
-      "import": "./dist/src/data/hooks/baremetal/useBaremetalsList",
-      "require": "./dist/src/data/hooks/baremetal/useBaremetalsList.js"
-    },
-    "./data/hooks/baremetal/useBaremetalDetails": {
-      "types": "./dist/types/src/data/hooks/baremetal/useBaremetalDetails.d.ts",
-      "import": "./dist/src/data/hooks/baremetal/useBaremetalDetails",
-      "require": "./dist/src/data/hooks/baremetal/useBaremetalDetails.js"
-    },
-    "./data/hooks/vaults/getVault": {
-      "types": "./dist/types/src/data/hooks/vaults/getVault.d.ts",
-      "import": "./dist/src/data/hooks/vaults/getVault",
-      "require": "./dist/src/data/hooks/vaults/getVault.js"
+    "./data/queries/baremetals.queries": {
+      "types": "./dist/types/src/data/queries/baremetals.queries.d.ts",
+      "import": "./dist/src/data/queries/baremetals.queries",
+      "require": "./dist/src/data/queries/baremetals.queries.js"
+    },
+    "./data/queries/vaults.queries": {
+      "types": "./dist/types/src/data/queries/vaults.queries.d.ts",
+      "import": "./dist/src/data/queries/vaults.queries",
+      "require": "./dist/src/data/queries/vaults.queries.js"
+    },
+    "./data/queries/queryKeys": {
+      "types": "./dist/types/src/data/queries/queryKeys.d.ts",
+      "import": "./dist/src/data/queries/queryKeys",
+      "require": "./dist/src/data/queries/queryKeys.js"
     },
     "./mocks/baremetals/baremetals.mocks": {
       "types": "./dist/types/src/mocks/baremetals/baremetals.mocks.d.ts",

@@ -1,19 +1,21 @@
 import React from 'react';
 
+import { useQuery } from '@tanstack/react-query';
+
 import { OdsSkeleton } from '@ovhcloud/ods-components/react';
 
 import { DataGridTextCell } from '@ovh-ux/manager-react-components';
 
-import { useLocationDetails } from '@/data/hooks/location/getLocationDetails';
+import { locationsQueries } from '@/data/queries/locations.queries';
 
 export type ResourceLocationCellProps = {
   region: string;
 };
 
 export const ResourceLocationCell = ({ region }: ResourceLocationCellProps) => {
-  const { data, isLoading, isError } = useLocationDetails(region);
+  const { data, isPending, isError } = useQuery(locationsQueries.detail(region));
 
-  if (isLoading) return <OdsSkeleton className="w-full" />;
+  if (isPending) return <OdsSkeleton className="w-full" />;
   if (isError) return <DataGridTextCell>{region}</DataGridTextCell>;
 
   return <DataGridTextCell>{data?.location}</DataGridTextCell>;

@@ -1,64 +1,69 @@
 import React from 'react';
 
+import { QueryClient } from '@tanstack/react-query';
 import { render, screen, waitFor } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
+import { queryKeys } from '@/data/queries/queryKeys';
 import { mockLocations } from '@/mocks/location/locations';
 import { mockVaults } from '@/mocks/vaults/vaults.mock';
 import { DataGridTextCellMock } from '@/test-utils/mocks/manager-react-components';
+import { testWrapperBuilder } from '@/test-utils/testWrapperBuilder';
+import { createQueryClientTest } from '@/test-utils/testWrapperProviders';
 
 import { ResourceLocationCell } from '../ResourceLocationCell.component';
 
-const { mockLocationDetails } = vi.hoisted(() => {
-  return {
-    mockLocationDetails: vi.fn(),
-  };
-});
-
-vi.mock('@/data/hooks/location/getLocationDetails', () => ({
-  useLocationDetails: mockLocationDetails,
-}));
-
 vi.mock('@ovh-ux/manager-react-components', () => ({
   DataGridTextCell: DataGridTextCellMock,
 }));
 
 describe('ResourceLocationCell', () => {
+  let queryClient: QueryClient;
+  const vault = mockVaults[0]!;
+  const region = vault.currentState.region;
+
+  const buildWrapper = () => testWrapperBuilder().withQueryClient(queryClient).build();
+
+  beforeEach(() => {
+    queryClient = createQueryClientTest();
+  });
+
   it('renders resourceName from currentState', async () => {
-    mockLocationDetails.mockReturnValue({
-      data: mockLocations[0],
-      isLoading: false,
-      isError: false,
-    });
-    const vault = { ...mockVaults[0]! };
+    queryClient.setQueryData(queryKeys.locations.detail(region), mockLocations[0]);
+
+    const wrapper = await buildWrapper();
 
-    render(<ResourceLocationCell region={vault.currentState.region} />);
+    render(<ResourceLocationCell region={region} />, { wrapper });
 
     await waitFor(() =>
       expect(screen.getByTestId('cell')).toHaveTextContent(mockLocations[0]!.location),
     );
-    expect(mockLocationDetails).toHaveBeenCalledWith(mockVaults[0]!.currentState.region);
   });
 
   it('renders during loading', async () => {
-    mockLocationDetails.mockReturnValue({ data: null, isLoading: true, isError: false });
-    const vault = mockVaults[0]!;
+    // Don't seed the cache so the query stays in loading state
 
-    const { container } = render(<ResourceLocationCell region={vault.currentState.region} />);
+    const wrapper = await buildWrapper();
+
+    const { container } = render(<ResourceLocationCell region={region} />, { wrapper });
 
     await waitFor(() => expect(container.querySelector('ods-skeleton')).toBeVisible());
-    expect(mockLocationDetails).toHaveBeenCalledWith(mockVaults[0]!.currentState.region);
   });
 
   it('renders during error', async () => {
-    mockLocationDetails.mockReturnValue({ data: null, isLoading: false, isError: true });
-    const vault = mockVaults[0]!;
+    // Seed the cache with an error state
+    queryClient.setQueryDefaults(queryKeys.locations.detail(region), { retry: false });
+    await queryClient.prefetchQuery({
+      queryKey: queryKeys.locations.detail(region),
+      queryFn: () => Promise.reject(new Error('fail')),
+    });
+
+    const wrapper = await buildWrapper();
 
-    render(<ResourceLocationCell region={vault.currentState.region} />);
+    render(<ResourceLocationCell region={region} />, { wrapper });
 
     await waitFor(() =>
-      expect(screen.getByTestId('cell')).toHaveTextContent(mockVaults[0]!.currentState.region),
+      expect(screen.getByTestId('cell')).toHaveTextContent(vault.currentState.region),
     );
-    expect(mockLocationDetails).toHaveBeenCalledWith(mockVaults[0]!.currentState.region);
   });
 });
@@ -1,19 +1,21 @@
 import React from 'react';
 
+import { useQuery } from '@tanstack/react-query';
+
 import { OdsSkeleton } from '@ovhcloud/ods-components/react';
 
 import { DataGridTextCell } from '@ovh-ux/manager-react-components';
 
-import { useLocationDetails } from '@/data/hooks/location/getLocationDetails';
+import { locationsQueries } from '@/data/queries/locations.queries';
 
 export type ResourceRegionCellProps = {
   region: string;
 };
 
 export const ResourceRegionCell = ({ region }: ResourceRegionCellProps) => {
-  const { data, isLoading, isError } = useLocationDetails(region);
+  const { data, isPending, isError } = useQuery(locationsQueries.detail(region));
 
-  if (isLoading) return <OdsSkeleton className="w-full" />;
+  if (isPending) return <OdsSkeleton className="w-full" />;
   if (isError) return <DataGridTextCell>{region}</DataGridTextCell>;
 
   return <DataGridTextCell>{data?.name}</DataGridTextCell>;