🪟 🧹 Optimizedestination over fetching - pass destination through react-router outlet context (#22068)

* optimize data fetching - pass "destination" through react-router outlet context

* extract destination outlet context to separate interface

Author: dizel852

airbyte-webapp/src/pages/destination/DestinationItemPage/DestinationItemPage.tsx

@@ -10,12 +10,11 @@ import { Breadcrumbs } from "components/ui/Breadcrumbs";
 import { PageHeader } from "components/ui/PageHeader";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
+import { useGetDestination } from "hooks/services/useDestinationHook";
 import { ResourceNotFoundErrorBoundary } from "views/common/ResorceNotFoundErrorBoundary";
 import { StartOverErrorView } from "views/common/StartOverErrorView";
 import { ConnectorDocumentationWrapper } from "views/Connector/ConnectorDocumentationLayout";
 
-import { useGetDestination } from "../../../hooks/services/useDestinationHook";
-
 export const DestinationItemPage: React.FC = () => {
   useTrackPage(PageTrackingCodes.DESTINATION_ITEM);
   const params = useParams() as { "*": StepsTypes | ""; id: string };
@@ -48,7 +47,7 @@ export const DestinationItemPage: React.FC = () => {
         />
         <Suspense fallback={<LoadingPage />}>
           <ApiErrorBoundary>
-            <Outlet />
+            <Outlet context={{ destination }} />
           </ApiErrorBoundary>
         </Suspense>
       </ConnectorDocumentationWrapper>

airbyte-webapp/src/pages/destination/DestinationOverviewPage.tsx

@@ -1,23 +1,24 @@
 import { useMemo } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import { useOutletContext } from "react-router-dom";
 
 import { ConnectorIcon } from "components/common/ConnectorIcon";
-import { StepsTypes, TableItemTitle } from "components/ConnectorBlocks";
+import { TableItemTitle } from "components/ConnectorBlocks";
 import { DestinationConnectionTable } from "components/destination/DestinationConnectionTable";
 import Placeholder, { ResourceTypes } from "components/Placeholder";
 import { DropdownMenuOptionType } from "components/ui/DropdownMenu";
 
 import { useConnectionList } from "hooks/services/useConnectionHook";
-import { useGetDestination } from "hooks/services/useDestinationHook";
 import { useSourceList } from "hooks/services/useSourceHook";
 import { DestinationPaths } from "pages/routePaths";
 import { useDestinationDefinition } from "services/connector/DestinationDefinitionService";
 
+import { DestinationOutletContext } from "./types";
+
 export const DestinationOverviewPage = () => {
-  const params = useParams() as { "*": StepsTypes | ""; id: string };
   const navigate = useNavigate();
 
-  const destination = useGetDestination(params.id);
+  const { destination } = useOutletContext<DestinationOutletContext>();
   const destinationDefinition = useDestinationDefinition(destination.destinationDefinitionId);
   // We load only connections attached to this destination to be shown in the connections grid
   const { connections } = useConnectionList({ destinationId: [destination.destinationId] });

airbyte-webapp/src/pages/destination/DestinationSettingsPage/DestinationSettingsPage.tsx

@@ -1,24 +1,22 @@
 import React, { useCallback, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
-import { useParams } from "react-router-dom";
-
-import { StepsTypes } from "components/ConnectorBlocks";
+import { useOutletContext } from "react-router-dom";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useFormChangeTrackerService, useUniqueFormId } from "hooks/services/FormChangeTracker";
 import { useConnectionList } from "hooks/services/useConnectionHook";
-import { useDeleteDestination, useGetDestination, useUpdateDestination } from "hooks/services/useDestinationHook";
+import { useDeleteDestination, useUpdateDestination } from "hooks/services/useDestinationHook";
 import { useDeleteModal } from "hooks/useDeleteModal";
 import { useDestinationDefinition } from "services/connector/DestinationDefinitionService";
 import { useGetDestinationDefinitionSpecification } from "services/connector/DestinationDefinitionSpecificationService";
 import { ConnectorCard } from "views/Connector/ConnectorCard";
 import { ConnectorCardValues } from "views/Connector/ConnectorForm/types";
 
 import styles from "./DestinationSettings.module.scss";
+import { DestinationOutletContext } from "../types";
 
 export const DestinationSettingsPage: React.FC = () => {
-  const params = useParams() as { "*": StepsTypes | ""; id: string };
-  const destination = useGetDestination(params.id);
+  const { destination } = useOutletContext<DestinationOutletContext>();
   const { connections: connectionsWithDestination } = useConnectionList({ destinationId: [destination.destinationId] });
   const destinationSpecification = useGetDestinationDefinitionSpecification(destination.destinationDefinitionId);
   const destinationDefinition = useDestinationDefinition(destination.destinationDefinitionId);

airbyte-webapp/src/pages/destination/types.ts

@@ -0,0 +1,5 @@
+import { DestinationRead } from "core/request/AirbyteClient";
+
+export interface DestinationOutletContext {
+  destination: DestinationRead;
+}