diff --git a/airbyte-webapp/src/hooks/services/useConnectionHook.tsx b/airbyte-webapp/src/hooks/services/useConnectionHook.tsx
index 842066ce182e4..9c936204d1044 100644
--- a/airbyte-webapp/src/hooks/services/useConnectionHook.tsx
+++ b/airbyte-webapp/src/hooks/services/useConnectionHook.tsx
@@ -1,4 +1,4 @@
-import { QueryObserverSuccessResult, useMutation, useQuery, useQueryClient } from "react-query";
+import { useMutation, useQueryClient } from "react-query";
 
 import FrequencyConfig from "config/FrequencyConfig.json";
 import { useConfig } from "config";
@@ -18,6 +18,7 @@ import { useInitService } from "services/useInitService";
 import { ConnectionService } from "core/domain/connection/ConnectionService";
 
 import { SCOPE_WORKSPACE } from "../../services/Scope";
+import { useSuspenseQuery } from "../../services/connector/useSuspenseQuery";
 import { useCurrentWorkspace } from "./useWorkspace";
 
 export const connectionsKeys = {
@@ -127,13 +128,7 @@ export const useResetConnection = () => {
 const useGetConnection = (connectionId: string, options?: { refetchInterval: number }): Connection => {
   const service = useWebConnectionService();
 
-  return (
-    useQuery(
-      connectionsKeys.detail(connectionId),
-      () => service.getConnection(connectionId),
-      options
-    ) as QueryObserverSuccessResult<Connection>
-  ).data;
+  return useSuspenseQuery(connectionsKeys.detail(connectionId), () => service.getConnection(connectionId), options);
 };
 
 const useCreateConnection = () => {
@@ -217,11 +212,7 @@ const useConnectionList = (): ListConnection => {
   const workspace = useCurrentWorkspace();
   const service = useWebConnectionService();
 
-  return (
-    useQuery(connectionsKeys.lists(), () => service.list(workspace.workspaceId)) as QueryObserverSuccessResult<{
-      connections: Connection[];
-    }>
-  ).data;
+  return useSuspenseQuery(connectionsKeys.lists(), () => service.list(workspace.workspaceId));
 };
 
 export { useConnectionList, useGetConnection, useUpdateConnection, useCreateConnection, useDeleteConnection };
diff --git a/airbyte-webapp/src/hooks/services/useDestinationHook.tsx b/airbyte-webapp/src/hooks/services/useDestinationHook.tsx
index ecbf4b3d71852..4d3d28aa25ed0 100644
--- a/airbyte-webapp/src/hooks/services/useDestinationHook.tsx
+++ b/airbyte-webapp/src/hooks/services/useDestinationHook.tsx
@@ -1,4 +1,4 @@
-import { QueryObserverSuccessResult, useMutation, useQuery, useQueryClient } from "react-query";
+import { useMutation, useQueryClient } from "react-query";
 
 import { Connection, ConnectionConfiguration } from "core/domain/connection";
 import { useAnalyticsService } from "hooks/services/Analytics/useAnalyticsService";
@@ -10,8 +10,9 @@ import { useInitService } from "services/useInitService";
 import { DestinationService } from "core/domain/connector/DestinationService";
 
 import { SCOPE_WORKSPACE } from "../../services/Scope";
-import { useCurrentWorkspace } from "./useWorkspace";
+import { useSuspenseQuery } from "../../services/connector/useSuspenseQuery";
 import { connectionsKeys, ListConnection } from "./useConnectionHook";
+import { useCurrentWorkspace } from "./useWorkspace";
 
 export const destinationsKeys = {
   all: [SCOPE_WORKSPACE, "destinations"] as const,
@@ -45,11 +46,7 @@ const useDestinationList = (): DestinationList => {
   const workspace = useCurrentWorkspace();
   const service = useDestinationService();
 
-  return (
-    useQuery(destinationsKeys.lists(), () =>
-      service.list(workspace.workspaceId)
-    ) as QueryObserverSuccessResult<DestinationList>
-  ).data;
+  return useSuspenseQuery(destinationsKeys.lists(), () => service.list(workspace.workspaceId));
 };
 
 const useGetDestination = <T extends string | undefined | null>(
@@ -57,11 +54,9 @@ const useGetDestination = <T extends string | undefined | null>(
 ): T extends string ? Destination : Destination | undefined => {
   const service = useDestinationService();
 
-  return (
-    useQuery(destinationsKeys.detail(destinationId ?? ""), () => service.get(destinationId ?? ""), {
-      enabled: isDefined(destinationId),
-    }) as QueryObserverSuccessResult<Destination>
-  ).data;
+  return useSuspenseQuery(destinationsKeys.detail(destinationId ?? ""), () => service.get(destinationId ?? ""), {
+    enabled: isDefined(destinationId),
+  });
 };
 
 const useCreateDestination = () => {
diff --git a/airbyte-webapp/src/hooks/services/useDocumentation.ts b/airbyte-webapp/src/hooks/services/useDocumentation.ts
index a7aba6fe83f2c..7b8b8b54cf55b 100644
--- a/airbyte-webapp/src/hooks/services/useDocumentation.ts
+++ b/airbyte-webapp/src/hooks/services/useDocumentation.ts
@@ -27,6 +27,5 @@ export const useDocumentation = (documentationUrl: string): UseDocumentationResu
     refetchOnMount: false,
     refetchOnWindowFocus: false,
     retry: false,
-    suspense: false,
   });
 };
diff --git a/airbyte-webapp/src/hooks/services/useSourceHook.tsx b/airbyte-webapp/src/hooks/services/useSourceHook.tsx
index e6fd38e32c94a..ada83df195ccb 100644
--- a/airbyte-webapp/src/hooks/services/useSourceHook.tsx
+++ b/airbyte-webapp/src/hooks/services/useSourceHook.tsx
@@ -1,4 +1,4 @@
-import { QueryObserverSuccessResult, useMutation, useQuery, useQueryClient } from "react-query";
+import { useMutation, useQueryClient } from "react-query";
 import { useCallback, useEffect, useState } from "react";
 
 import { Connection, ConnectionConfiguration } from "core/domain/connection";
@@ -13,8 +13,9 @@ import { SyncSchema } from "core/domain/catalog";
 import { JobInfo } from "core/domain/job";
 
 import { SCOPE_WORKSPACE } from "../../services/Scope";
-import { useCurrentWorkspace } from "./useWorkspace";
+import { useSuspenseQuery } from "../../services/connector/useSuspenseQuery";
 import { connectionsKeys, ListConnection } from "./useConnectionHook";
+import { useCurrentWorkspace } from "./useWorkspace";
 
 export const sourcesKeys = {
   all: [SCOPE_WORKSPACE, "sources"] as const,
@@ -49,9 +50,7 @@ const useSourceList = (): SourceList => {
   const workspace = useCurrentWorkspace();
   const service = useSourceService();
 
-  return (
-    useQuery(sourcesKeys.lists(), () => service.list(workspace.workspaceId)) as QueryObserverSuccessResult<SourceList>
-  ).data;
+  return useSuspenseQuery(sourcesKeys.lists(), () => service.list(workspace.workspaceId));
 };
 
 const useGetSource = <T extends string | undefined | null>(
@@ -59,11 +58,9 @@ const useGetSource = <T extends string | undefined | null>(
 ): T extends string ? Source : Source | undefined => {
   const service = useSourceService();
 
-  return (
-    useQuery(sourcesKeys.detail(sourceId ?? ""), () => service.get(sourceId ?? ""), {
-      enabled: isDefined(sourceId),
-    }) as QueryObserverSuccessResult<Source>
-  ).data;
+  return useSuspenseQuery(sourcesKeys.detail(sourceId ?? ""), () => service.get(sourceId ?? ""), {
+    enabled: isDefined(sourceId),
+  });
 };
 
 const useCreateSource = () => {
diff --git a/airbyte-webapp/src/packages/cloud/services/users/UseUserHook.ts b/airbyte-webapp/src/packages/cloud/services/users/UseUserHook.ts
index 96b279daece12..9fa5c4c9b451e 100644
--- a/airbyte-webapp/src/packages/cloud/services/users/UseUserHook.ts
+++ b/airbyte-webapp/src/packages/cloud/services/users/UseUserHook.ts
@@ -1,8 +1,9 @@
-import { useMutation, useQuery, useQueryClient } from "react-query";
+import { useMutation, useQueryClient } from "react-query";
 
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import { SCOPE_WORKSPACE } from "services/Scope";
 
+import { useSuspenseQuery } from "../../../../services/connector/useSuspenseQuery";
 import { useGetUserService } from "./UserService";
 
 export const userKeys = {
@@ -17,9 +18,7 @@ export const useListUsers = () => {
   const userService = useGetUserService();
   const { workspaceId } = useCurrentWorkspace();
 
-  return useQuery(userKeys.list(workspaceId), () => userService.listByWorkspaceId(workspaceId), {
-    suspense: true,
-  });
+  return useSuspenseQuery(userKeys.list(workspaceId), () => userService.listByWorkspaceId(workspaceId));
 };
 
 export const useUserHook = () => {
diff --git a/airbyte-webapp/src/packages/cloud/services/workspaces/WorkspacesService.tsx b/airbyte-webapp/src/packages/cloud/services/workspaces/WorkspacesService.tsx
index d68c9bad88a5e..516ecb03afd68 100644
--- a/airbyte-webapp/src/packages/cloud/services/workspaces/WorkspacesService.tsx
+++ b/airbyte-webapp/src/packages/cloud/services/workspaces/WorkspacesService.tsx
@@ -1,14 +1,15 @@
-import { QueryObserverResult, useMutation, useQuery, useQueryClient } from "react-query";
 import { useCallback } from "react";
-import { QueryObserverSuccessResult } from "react-query/types/core/types";
+import { QueryObserverResult, useMutation, useQuery, useQueryClient } from "react-query";
 
-import type { CloudWorkspace, CloudWorkspaceUsage } from "packages/cloud/lib/domain/cloudWorkspaces/types";
 import { CloudWorkspacesService } from "packages/cloud/lib/domain/cloudWorkspaces/CloudWorkspacesService";
+import type { CloudWorkspace, CloudWorkspaceUsage } from "packages/cloud/lib/domain/cloudWorkspaces/types";
 import { useCurrentUser } from "packages/cloud/services/auth/AuthService";
 import { useConfig } from "packages/cloud/services/config";
+import { SCOPE_USER } from "services/Scope";
 import { useDefaultRequestMiddlewares } from "services/useDefaultRequestMiddlewares";
 import { useInitService } from "services/useInitService";
-import { SCOPE_USER } from "services/Scope";
+
+import { useSuspenseQuery } from "../../../../services/connector/useSuspenseQuery";
 
 export const workspaceKeys = {
   all: [SCOPE_USER, "cloud_workspaces"] as const,
@@ -34,20 +35,14 @@ export function useListCloudWorkspaces(): CloudWorkspace[] {
   const service = useGetWorkspaceService();
   const user = useCurrentUser();
 
-  return (
-    useQuery<CloudWorkspace[]>(workspaceKeys.lists(), () =>
-      service.listByUser(user.userId)
-    ) as QueryObserverSuccessResult<CloudWorkspace[]>
-  ).data;
+  return useSuspenseQuery<CloudWorkspace[]>(workspaceKeys.lists(), () => service.listByUser(user.userId));
 }
 
 export function useListCloudWorkspacesAsync(): QueryObserverResult<CloudWorkspace[]> {
   const service = useGetWorkspaceService();
   const user = useCurrentUser();
 
-  return useQuery<CloudWorkspace[]>(workspaceKeys.lists(), () => service.listByUser(user.userId), {
-    suspense: false,
-  });
+  return useQuery<CloudWorkspace[]>(workspaceKeys.lists(), () => service.listByUser(user.userId));
 }
 
 export function useCreateWorkspace() {
@@ -113,11 +108,7 @@ export function useRemoveWorkspace() {
 export function useGetCloudWorkspace(workspaceId: string): CloudWorkspace {
   const service = useGetWorkspaceService();
 
-  return (
-    useQuery<CloudWorkspace>([workspaceKeys.detail(workspaceId)], () =>
-      service.get(workspaceId)
-    ) as QueryObserverSuccessResult<CloudWorkspace>
-  ).data;
+  return useSuspenseQuery<CloudWorkspace>([workspaceKeys.detail(workspaceId)], () => service.get(workspaceId));
 }
 
 export function useInvalidateCloudWorkspace(workspaceId: string): () => Promise<void> {
@@ -129,10 +120,10 @@ export function useInvalidateCloudWorkspace(workspaceId: string): () => Promise<
   );
 }
 
-export function useGetUsage(workspaceId: string): QueryObserverResult<CloudWorkspaceUsage> {
+export function useGetUsage(workspaceId: string): CloudWorkspaceUsage {
   const service = useGetWorkspaceService();
 
-  return useQuery<CloudWorkspaceUsage>([workspaceKeys.usage(workspaceId)], () => service.getUsage(workspaceId));
+  return useSuspenseQuery<CloudWorkspaceUsage>([workspaceKeys.usage(workspaceId)], () => service.getUsage(workspaceId));
 }
 
 export { useWorkspaceService } from "services/workspaces/WorkspacesService";
diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsagePage.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsagePage.tsx
index 369f7b93311a4..6ea42aa7ea90a 100644
--- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsagePage.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsagePage.tsx
@@ -35,7 +35,7 @@ const CreditsUsagePage: React.FC = () => {
   const { formatMessage, formatDate } = useIntl();
 
   const { workspaceId } = useCurrentWorkspace();
-  const { data } = useGetUsage(workspaceId);
+  const data = useGetUsage(workspaceId);
 
   const chartData = useMemo(
     () =>
diff --git a/airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/UsersSettingsView.tsx b/airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/UsersSettingsView.tsx
index 9f65f89391304..dacf779c54b0f 100644
--- a/airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/UsersSettingsView.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/UsersSettingsView.tsx
@@ -36,7 +36,7 @@ export const UsersSettingsView: React.FC = () => {
   const [modalIsOpen, toggleModal] = useToggle(false);
   const { workspaceId } = useCurrentWorkspace();
 
-  const { data: users } = useListUsers();
+  const users = useListUsers();
 
   const { user } = useAuthService();
 
diff --git a/airbyte-webapp/src/services/connector/DestinationDefinitionService.ts b/airbyte-webapp/src/services/connector/DestinationDefinitionService.ts
index a468211f107b6..2beee642fed8c 100644
--- a/airbyte-webapp/src/services/connector/DestinationDefinitionService.ts
+++ b/airbyte-webapp/src/services/connector/DestinationDefinitionService.ts
@@ -1,4 +1,4 @@
-import { QueryObserverSuccessResult, useMutation, useQuery, useQueryClient } from "react-query";
+import { useMutation, useQueryClient } from "react-query";
 
 import { DestinationDefinition } from "core/domain/connector";
 import { useConfig } from "config";
@@ -12,6 +12,7 @@ import { useCurrentWorkspace } from "services/workspaces/WorkspacesService";
 import { isDefined } from "utils/common";
 
 import { SCOPE_WORKSPACE } from "../Scope";
+import { useSuspenseQuery } from "./useSuspenseQuery";
 
 export const destinationDefinitionKeys = {
   all: [SCOPE_WORKSPACE, "destinationDefinition"] as const,
@@ -36,32 +37,28 @@ const useDestinationDefinitionList = (): {
   const service = useGetDestinationDefinitionService();
   const workspace = useCurrentWorkspace();
 
-  return (
-    useQuery(destinationDefinitionKeys.lists(), async () => {
-      const [definition, latestDefinition] = await Promise.all([
-        service.list(workspace.workspaceId),
-        service.listLatest(workspace.workspaceId),
-      ]);
-
-      const destinationDefinitions: DestinationDefinition[] = definition.destinationDefinitions.map(
-        (destination: DestinationDefinition) => {
-          const withLatest = latestDefinition.destinationDefinitions.find(
-            (latestDestination: DestinationDefinition) =>
-              latestDestination.destinationDefinitionId === destination.destinationDefinitionId
-          );
-
-          return {
-            ...destination,
-            latestDockerImageTag: withLatest?.dockerImageTag ?? "",
-          };
-        }
-      );
+  return useSuspenseQuery(destinationDefinitionKeys.lists(), async () => {
+    const [definition, latestDefinition] = await Promise.all([
+      service.list(workspace.workspaceId),
+      service.listLatest(workspace.workspaceId),
+    ]);
+
+    const destinationDefinitions: DestinationDefinition[] = definition.destinationDefinitions.map(
+      (destination: DestinationDefinition) => {
+        const withLatest = latestDefinition.destinationDefinitions.find(
+          (latestDestination: DestinationDefinition) =>
+            latestDestination.destinationDefinitionId === destination.destinationDefinitionId
+        );
+
+        return {
+          ...destination,
+          latestDockerImageTag: withLatest?.dockerImageTag ?? "",
+        };
+      }
+    );
 
-      return { destinationDefinitions };
-    }) as QueryObserverSuccessResult<{
-      destinationDefinitions: DestinationDefinition[];
-    }>
-  ).data;
+    return { destinationDefinitions };
+  });
 };
 
 const useDestinationDefinition = <T extends string | undefined>(
@@ -69,11 +66,9 @@ const useDestinationDefinition = <T extends string | undefined>(
 ): T extends string ? DestinationDefinition : DestinationDefinition | undefined => {
   const service = useGetDestinationDefinitionService();
 
-  return (
-    useQuery(destinationDefinitionKeys.detail(id || ""), () => service.get(id || ""), {
-      enabled: isDefined(id),
-    }) as QueryObserverSuccessResult<DestinationDefinition>
-  ).data;
+  return useSuspenseQuery(destinationDefinitionKeys.detail(id || ""), () => service.get(id || ""), {
+    enabled: isDefined(id),
+  });
 };
 
 const useCreateDestinationDefinition = () => {
diff --git a/airbyte-webapp/src/services/connector/DestinationDefinitionSpecificationService.tsx b/airbyte-webapp/src/services/connector/DestinationDefinitionSpecificationService.tsx
index 851ecb97e5f62..b84f2c97d6eaa 100644
--- a/airbyte-webapp/src/services/connector/DestinationDefinitionSpecificationService.tsx
+++ b/airbyte-webapp/src/services/connector/DestinationDefinitionSpecificationService.tsx
@@ -1,4 +1,4 @@
-import { QueryObserverResult, QueryObserverSuccessResult, useQuery } from "react-query";
+import { QueryObserverResult, useQuery } from "react-query";
 
 import { DestinationDefinitionSpecification } from "core/domain/connector";
 import { useConfig } from "config";
@@ -8,6 +8,7 @@ import { DestinationDefinitionSpecificationService } from "core/domain/connector
 import { isDefined } from "utils/common";
 
 import { SCOPE_WORKSPACE } from "../Scope";
+import { useSuspenseQuery } from "./useSuspenseQuery";
 
 export const destinationDefinitionSpecificationKeys = {
   all: [SCOPE_WORKSPACE, "destinationDefinitionSpecification"] as const,
@@ -28,11 +29,7 @@ function useGetService(): DestinationDefinitionSpecificationService {
 export const useGetDestinationDefinitionSpecification = (id: string): DestinationDefinitionSpecification => {
   const service = useGetService();
 
-  return (
-    useQuery(destinationDefinitionSpecificationKeys.detail(id), () =>
-      service.get(id)
-    ) as QueryObserverSuccessResult<DestinationDefinitionSpecification>
-  ).data;
+  return useSuspenseQuery(destinationDefinitionSpecificationKeys.detail(id), () => service.get(id));
 };
 
 export const useGetDestinationDefinitionSpecificationAsync = (
@@ -42,7 +39,6 @@ export const useGetDestinationDefinitionSpecificationAsync = (
 
   const escapedId = id ?? "";
   return useQuery(destinationDefinitionSpecificationKeys.detail(escapedId), () => service.get(escapedId), {
-    suspense: false,
     enabled: isDefined(id),
   });
 };
diff --git a/airbyte-webapp/src/services/connector/SourceDefinitionService.ts b/airbyte-webapp/src/services/connector/SourceDefinitionService.ts
index 75133860251b5..d7fab6ba92bb6 100644
--- a/airbyte-webapp/src/services/connector/SourceDefinitionService.ts
+++ b/airbyte-webapp/src/services/connector/SourceDefinitionService.ts
@@ -1,4 +1,4 @@
-import { QueryObserverSuccessResult, useMutation, useQuery, useQueryClient } from "react-query";
+import { useMutation, useQueryClient } from "react-query";
 
 import { SourceDefinition } from "core/domain/connector";
 import { useConfig } from "config";
@@ -9,6 +9,7 @@ import { useCurrentWorkspace } from "services/workspaces/WorkspacesService";
 import { isDefined } from "utils/common";
 
 import { SCOPE_WORKSPACE } from "../Scope";
+import { useSuspenseQuery } from "./useSuspenseQuery";
 
 export const sourceDefinitionKeys = {
   all: [SCOPE_WORKSPACE, "sourceDefinition"] as const,
@@ -33,27 +34,25 @@ const useSourceDefinitionList = (): {
   const service = useGetSourceDefinitionService();
   const workspace = useCurrentWorkspace();
 
-  return (
-    useQuery(sourceDefinitionKeys.lists(), async () => {
-      const [definition, latestDefinition] = await Promise.all([
-        service.list(workspace.workspaceId),
-        service.listLatest(workspace.workspaceId),
-      ]);
+  return useSuspenseQuery(sourceDefinitionKeys.lists(), async () => {
+    const [definition, latestDefinition] = await Promise.all([
+      service.list(workspace.workspaceId),
+      service.listLatest(workspace.workspaceId),
+    ]);
 
-      const sourceDefinitions: SourceDefinition[] = definition.sourceDefinitions.map((source: SourceDefinition) => {
-        const withLatest = latestDefinition.sourceDefinitions.find(
-          (latestSource: SourceDefinition) => latestSource.sourceDefinitionId === source.sourceDefinitionId
-        );
+    const sourceDefinitions: SourceDefinition[] = definition.sourceDefinitions.map((source: SourceDefinition) => {
+      const withLatest = latestDefinition.sourceDefinitions.find(
+        (latestSource: SourceDefinition) => latestSource.sourceDefinitionId === source.sourceDefinitionId
+      );
 
-        return {
-          ...source,
-          latestDockerImageTag: withLatest?.dockerImageTag ?? "",
-        };
-      });
+      return {
+        ...source,
+        latestDockerImageTag: withLatest?.dockerImageTag ?? "",
+      };
+    });
 
-      return { sourceDefinitions };
-    }) as QueryObserverSuccessResult<{ sourceDefinitions: SourceDefinition[] }>
-  ).data;
+    return { sourceDefinitions };
+  });
 };
 
 const useSourceDefinition = <T extends string | undefined>(
@@ -61,11 +60,9 @@ const useSourceDefinition = <T extends string | undefined>(
 ): T extends string ? SourceDefinition : SourceDefinition | undefined => {
   const service = useGetSourceDefinitionService();
 
-  return (
-    useQuery(sourceDefinitionKeys.detail(id || ""), () => service.get(id || ""), {
-      enabled: isDefined(id),
-    }) as QueryObserverSuccessResult<SourceDefinition>
-  ).data;
+  return useSuspenseQuery(sourceDefinitionKeys.detail(id || ""), () => service.get(id || ""), {
+    enabled: isDefined(id),
+  });
 };
 
 const useCreateSourceDefinition = () => {
diff --git a/airbyte-webapp/src/services/connector/SourceDefinitionSpecificationService.tsx b/airbyte-webapp/src/services/connector/SourceDefinitionSpecificationService.tsx
index d382c0687588c..3a8033269a5c6 100644
--- a/airbyte-webapp/src/services/connector/SourceDefinitionSpecificationService.tsx
+++ b/airbyte-webapp/src/services/connector/SourceDefinitionSpecificationService.tsx
@@ -1,4 +1,4 @@
-import { QueryObserverResult, QueryObserverSuccessResult, useQuery } from "react-query";
+import { QueryObserverResult, useQuery } from "react-query";
 
 import { SourceDefinitionSpecification } from "core/domain/connector";
 import { useConfig } from "config";
@@ -8,6 +8,7 @@ import { SourceDefinitionSpecificationService } from "core/domain/connector/Sour
 import { isDefined } from "utils/common";
 
 import { SCOPE_WORKSPACE } from "../Scope";
+import { useSuspenseQuery } from "./useSuspenseQuery";
 
 export const sourceDefinitionSpecificationKeys = {
   all: [SCOPE_WORKSPACE, "sourceDefinitionSpecification"] as const,
@@ -28,11 +29,7 @@ function useGetService(): SourceDefinitionSpecificationService {
 export const useGetSourceDefinitionSpecification = (id: string): SourceDefinitionSpecification => {
   const service = useGetService();
 
-  return (
-    useQuery(sourceDefinitionSpecificationKeys.detail(id), () =>
-      service.get(id)
-    ) as QueryObserverSuccessResult<SourceDefinitionSpecification>
-  ).data;
+  return useSuspenseQuery(sourceDefinitionSpecificationKeys.detail(id), () => service.get(id));
 };
 
 export const useGetSourceDefinitionSpecificationAsync = (
@@ -42,7 +39,6 @@ export const useGetSourceDefinitionSpecificationAsync = (
 
   const escapedId = id ?? "";
   return useQuery(sourceDefinitionSpecificationKeys.detail(escapedId), () => service.get(escapedId), {
-    suspense: false,
     enabled: isDefined(id),
   });
 };
diff --git a/airbyte-webapp/src/services/connector/useSuspenseQuery.ts b/airbyte-webapp/src/services/connector/useSuspenseQuery.ts
new file mode 100644
index 0000000000000..7f758583c3194
--- /dev/null
+++ b/airbyte-webapp/src/services/connector/useSuspenseQuery.ts
@@ -0,0 +1,21 @@
+import { QueryFunction, QueryKey, useQuery, UseQueryOptions } from "react-query";
+
+type Disabled = Readonly<{ enabled: false }>;
+
+export function useSuspenseQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey
+>(
+  queryKey: TQueryKey,
+  queryFn: QueryFunction<TQueryFnData, TQueryKey>,
+  options: Readonly<
+    Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, "queryKey" | "queryFn" | "suspense">
+  > = {}
+) {
+  return useQuery<TQueryFnData, TError, TData, TQueryKey>(queryKey, queryFn, {
+    ...options,
+    suspense: true,
+  }).data as typeof options extends Disabled ? TData | undefined : TData;
+}
diff --git a/airbyte-webapp/src/services/job/JobService.tsx b/airbyte-webapp/src/services/job/JobService.tsx
index 87516c33d21d1..26b36a6a45273 100644
--- a/airbyte-webapp/src/services/job/JobService.tsx
+++ b/airbyte-webapp/src/services/job/JobService.tsx
@@ -1,4 +1,4 @@
-import { QueryObserverSuccessResult, UseMutateAsyncFunction, useMutation, useQuery, useQueryClient } from "react-query";
+import { UseMutateAsyncFunction, useMutation, useQueryClient } from "react-query";
 
 import { useConfig } from "config";
 import { useDefaultRequestMiddlewares } from "services/useDefaultRequestMiddlewares";
@@ -6,6 +6,8 @@ import { useInitService } from "services/useInitService";
 import { JobsService, ListParams } from "core/domain/job/JobsService";
 import { JobDetails, JobListItem, JobDebugInfoDetails } from "core/domain/job/Job";
 
+import { useSuspenseQuery } from "../connector/useSuspenseQuery";
+
 export const jobsKeys = {
   all: ["jobs"] as const,
   lists: () => [...jobsKeys.all, "list"] as const,
@@ -25,31 +27,25 @@ function useGetJobService(): JobsService {
 
 export const useListJobs = (listParams: ListParams): JobListItem[] => {
   const service = useGetJobService();
-  return (
-    useQuery(jobsKeys.list(listParams.configId), () => service.list(listParams), {
-      refetchInterval: 2500, // every 2,5 seconds,
-    }) as QueryObserverSuccessResult<{ jobs: JobListItem[] }>
-  ).data.jobs;
+  return useSuspenseQuery(jobsKeys.list(listParams.configId), () => service.list(listParams), {
+    refetchInterval: 2500, // every 2,5 seconds,
+  }).jobs;
 };
 
 export const useGetJob = (id: string | number): JobDetails => {
   const service = useGetJobService();
 
-  return (
-    useQuery(jobsKeys.detail(id), () => service.get(id), {
-      refetchInterval: 2500, // every 2,5 seconds,
-    }) as QueryObserverSuccessResult<JobDetails>
-  ).data;
+  return useSuspenseQuery(jobsKeys.detail(id), () => service.get(id), {
+    refetchInterval: 2500, // every 2,5 seconds,
+  });
 };
 
 export const useGetDebugInfoJob = (id: string | number): JobDebugInfoDetails => {
   const service = useGetJobService();
 
-  return (
-    useQuery(jobsKeys.getDebugInfo(id), () => service.getDebugInfo(id), {
-      refetchInterval: false,
-    }) as QueryObserverSuccessResult<JobDebugInfoDetails>
-  ).data;
+  return useSuspenseQuery(jobsKeys.getDebugInfo(id), () => service.getDebugInfo(id), {
+    refetchInterval: false,
+  });
 };
 
 export const useCancelJob = (): UseMutateAsyncFunction<JobDetails, Error, string | number> => {
diff --git a/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx b/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx
index 1d4ddfca1c04f..79e82d718f7c7 100644
--- a/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx
+++ b/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useMemo } from "react";
-import { QueryObserverSuccessResult, useMutation, useQuery, useQueryClient } from "react-query";
+import { useMutation, useQueryClient } from "react-query";
 
 import useRouter from "hooks/useRouter";
 import { Workspace, WorkspaceService, WorkspaceState } from "core/domain/workspace";
@@ -9,6 +9,7 @@ import { useConfig } from "config";
 import { useDefaultRequestMiddlewares } from "../useDefaultRequestMiddlewares";
 import { useInitService } from "../useInitService";
 import { SCOPE_USER, SCOPE_WORKSPACE } from "../Scope";
+import { useSuspenseQuery } from "../connector/useSuspenseQuery";
 
 export const workspaceKeys = {
   all: [SCOPE_USER, "workspaces"] as const,
@@ -96,24 +97,18 @@ export const useCurrentWorkspaceState = (): WorkspaceState => {
   const workspaceId = useCurrentWorkspaceId();
   const service = useWorkspaceApiService();
 
-  return (
-    useQuery(workspaceKeys.state(workspaceId), () => service.getState(workspaceId), {
-      // We want to keep this query only shortly in cache, so we refetch
-      // the data whenever the user might have changed sources/destinations/connections
-      // without requiring to manually invalidate that query on each change.
-      cacheTime: 5 * 1000,
-    }) as QueryObserverSuccessResult<WorkspaceState>
-  ).data;
+  return useSuspenseQuery(workspaceKeys.state(workspaceId), () => service.getState(workspaceId), {
+    // We want to keep this query only shortly in cache, so we refetch
+    // the data whenever the user might have changed sources/destinations/connections
+    // without requiring to manually invalidate that query on each change.
+    cacheTime: 5 * 1000,
+  });
 };
 
 export const useListWorkspaces = (): Workspace[] => {
   const service = useWorkspaceApiService();
 
-  return (
-    useQuery(workspaceKeys.lists(), () => service.list()) as QueryObserverSuccessResult<{
-      workspaces: Workspace[];
-    }>
-  ).data.workspaces;
+  return useSuspenseQuery(workspaceKeys.lists(), () => service.list()).workspaces;
 };
 
 export const useGetWorkspace = (
@@ -124,13 +119,7 @@ export const useGetWorkspace = (
 ): Workspace => {
   const service = useWorkspaceApiService();
 
-  return (
-    useQuery(
-      workspaceKeys.detail(workspaceId),
-      () => service.get(workspaceId),
-      options
-    ) as QueryObserverSuccessResult<Workspace>
-  ).data;
+  return useSuspenseQuery(workspaceKeys.detail(workspaceId), () => service.get(workspaceId), options);
 };
 
 export const useUpdateWorkspace = () => {
diff --git a/airbyte-webapp/src/views/common/StoreProvider.tsx b/airbyte-webapp/src/views/common/StoreProvider.tsx
index 76e5981bf955d..8c61dfd08038d 100644
--- a/airbyte-webapp/src/views/common/StoreProvider.tsx
+++ b/airbyte-webapp/src/views/common/StoreProvider.tsx
@@ -5,7 +5,6 @@ import { ReactQueryDevtools } from "react-query/devtools";
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      suspense: true,
       refetchOnWindowFocus: false,
       refetchOnReconnect: false,
       retry: 0,