refactor(console): apply useSWRImmutable for connector factory requests

packages/console/src/components/CreateConnectorForm/index.tsx

@@ -11,6 +11,7 @@ import { TenantsContext } from '@/contexts/TenantsProvider';
 import DynamicT from '@/ds-components/DynamicT';
 import ModalLayout from '@/ds-components/ModalLayout';
 import type { RequestError } from '@/hooks/use-api';
+import useConnectorFactories from '@/hooks/use-connector-factories';
 import useSubscriptionPlan from '@/hooks/use-subscription-plan';
 import * as modalStyles from '@/scss/modal.module.scss';
 
@@ -35,10 +36,7 @@ function CreateConnectorForm({ onClose, isOpen: isFormOpen, type }: Props) {
     ConnectorResponse[],
     RequestError
   >('api/connectors');
-  const { data: factories, error: factoriesError } = useSWR<
+  const { data: factories, error: factoriesError } = useConnectorFactories();
-    ConnectorFactoryResponse[],
-    RequestError
-  >('api/connector-factories');
   const isLoading = !factories && !existingConnectors && !connectorsError && !factoriesError;
   const [activeGroupId, setActiveGroupId] = useState<string>();
   const [activeFactoryId, setActiveFactoryId] = useState<string>();

packages/console/src/hooks/use-connector-factories.ts

@@ -0,0 +1,9 @@
+import { type ConnectorFactoryResponse } from '@logto/schemas';
+import useSWRImmutable from 'swr/immutable';
+
+import { type RequestError } from './use-api';
+
+const useConnectorFactories = () =>
+  useSWRImmutable<ConnectorFactoryResponse[], RequestError>('api/connector-factories');
+
+export default useConnectorFactories;

packages/console/src/pages/ConnectorDetails/index.tsx

@@ -7,6 +7,7 @@ import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useParams } from 'react-router-dom';
 import useSWR, { useSWRConfig } from 'swr';
+import useSWRImmutable from 'swr/immutable';
 
 import Delete from '@/assets/icons/delete.svg';
 import More from '@/assets/icons/more.svg';
@@ -59,7 +60,7 @@ function ConnectorDetails() {
     data: connectorFactory,
     error: fetchConnectorFactoryError,
     mutate: mutateConnectorFactory,
-  } = useSWR<ConnectorFactoryResponse, RequestError>(
+  } = useSWRImmutable<ConnectorFactoryResponse, RequestError>(
     data?.isStandard && `api/connector-factories/${data.connectorId}`
   );
 

packages/console/src/pages/Connectors/ConnectorTypeColumn/index.tsx

@@ -1,6 +1,6 @@
 import type { ConnectorFactoryResponse } from '@logto/schemas';
 import { useTranslation } from 'react-i18next';
-import useSWR from 'swr';
+import useSWRImmutable from 'swr/immutable';
 
 import UnnamedTrans from '@/components/UnnamedTrans';
 import { connectorTitlePlaceHolder } from '@/consts/connectors';
@@ -21,7 +21,7 @@ function ConnectorTypeColumn({ connectorGroup: { type, connectors } }: Props) {
 
   const firstStandardConnector = standardConnectors[0];
 
-  const { data: connectorFactory } = useSWR<ConnectorFactoryResponse>(
+  const { data: connectorFactory } = useSWRImmutable<ConnectorFactoryResponse>(
     firstStandardConnector && `api/connector-factories/${firstStandardConnector.connectorId}`
   );
 

packages/console/src/pages/Connectors/index.tsx

@@ -1,12 +1,10 @@
 import { withAppInsights } from '@logto/app-insights/react';
 import { ServiceConnector } from '@logto/connector-kit';
 import { ConnectorType } from '@logto/schemas';
-import type { ConnectorFactoryResponse } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
-import useSWR from 'swr';
 
 import Plus from '@/assets/icons/plus.svg';
 import SocialConnectorEmptyDark from '@/assets/images/social-connector-empty-dark.svg';
@@ -18,8 +16,8 @@ import { ConnectorsTabs } from '@/consts/page-tabs';
 import Button from '@/ds-components/Button';
 import TabNav, { TabNavItem } from '@/ds-components/TabNav';
 import TablePlaceholder from '@/ds-components/Table/TablePlaceholder';
-import type { RequestError } from '@/hooks/use-api';
 import useConnectorApi from '@/hooks/use-connector-api';
+import useConnectorFactories from '@/hooks/use-connector-factories';
 import useConnectorGroups from '@/hooks/use-connector-groups';
 import useDocumentationUrl from '@/hooks/use-documentation-url';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
@@ -68,10 +66,7 @@ function Connectors() {
   const { getDocumentationUrl } = useDocumentationUrl();
   const { createConnector } = useConnectorApi();
   const { data, error, mutate } = useConnectorGroups();
-  const { data: factories, error: factoriesError } = useSWR<
+  const { data: factories, error: factoriesError } = useConnectorFactories();
-    ConnectorFactoryResponse[],
-    RequestError
-  >('api/connector-factories');
 
   const isLoading = !data && !factories && !error && !factoriesError;