Added useSuspenseQuery hook, remove top-level suspense: true

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 };

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,23 +46,17 @@ 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>(
   destinationId: T
 ): 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 = () => {

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,
   });
 };

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,21 +50,17 @@ 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>(
   sourceId: T
 ): 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 = () => {

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 = () => {

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";

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(
     () =>

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();
 

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,44 +37,38 @@ 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>(
   id: T
 ): 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 = () => {

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),
   });
 };