diff --git a/src/Providers/ProvidersPage.tsx b/src/Providers/ProvidersPage.tsx
index 811c75e8b..0c4a14b95 100644
--- a/src/Providers/ProvidersPage.tsx
+++ b/src/Providers/ProvidersPage.tsx
@@ -1,9 +1,9 @@
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'src/internal/i18n';
 import { ProviderResource } from 'src/internal/k8s';
+import { useMockableK8sWatchResource } from 'src/utils/fetch';
 
 import { MOCK_CLUSTER_PROVIDERS } from '@app/queries/mocks/providers.mock';
-import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
 import {
   Button,
   Level,
@@ -26,17 +26,11 @@ import { createMetaMatcher, Field } from './components/shared';
 import { NAME, NAMESPACE, READY, TYPE, URL } from './components/shared';
 import TableView from './components/TableView';
 
-const isMock = process.env.DATA_SOURCE === 'mock';
-
 const useProviders = ({ kind, namespace }) => {
-  const [providers, loaded, error] = isMock
-    ? [MOCK_CLUSTER_PROVIDERS, true, false]
-    : useK8sWatchResource<ProviderResource[]>({
-        kind,
-        isList: true,
-        namespaced: true,
-        namespace,
-      });
+  const [providers, loaded, error] = useMockableK8sWatchResource(
+    { kind, namespace },
+    MOCK_CLUSTER_PROVIDERS,
+  );
 
   // const inventoryProvidersQuery = useInventoryProvidersQuery();
   // providers.map(p => enhanceWithInventory(inventoryProvidersQuery))
diff --git a/src/utils/fetch.ts b/src/utils/fetch.ts
new file mode 100644
index 000000000..e9fa27832
--- /dev/null
+++ b/src/utils/fetch.ts
@@ -0,0 +1,17 @@
+import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
+
+const isMock = process.env.DATA_SOURCE === 'mock';
+
+export function useMockableK8sWatchResource<T>(
+  { kind, namespace },
+  mockData: T[] = [],
+) {
+  return isMock
+    ? [mockData, true, false]
+    : useK8sWatchResource<T[]>({
+        kind,
+        isList: true,
+        namespaced: true,
+        namespace,
+      });
+}