Merge pull request #7218 from weseek/imprv/frequent-swr-calling

imprv: Reduce frequent API calling by SWR

packages/app/src/components/InAppNotification/InAppNotificationDropdown.tsx

@@ -26,7 +26,10 @@ export const InAppNotificationDropdown = (): JSX.Element => {
   const limit = 6;
 
   const { data: socket } = useDefaultSocket();
-  const { data: inAppNotificationData, mutate: mutateInAppNotificationData } = useSWRxInAppNotifications(limit);
+  const { data: inAppNotificationData, mutate: mutateInAppNotificationData } = useSWRxInAppNotifications(
+    limit, undefined, undefined,
+    { revalidateOnFocus: isOpen },
+  );
   const { data: inAppNotificationUnreadStatusCount, mutate: mutateInAppNotificationUnreadStatusCount } = useSWRxInAppNotificationStatus();
 
   // ripple

packages/app/src/components/PageEditor/DrawioModal.tsx

@@ -37,7 +37,12 @@ const drawioConfig = {
 
 export const DrawioModal = (): JSX.Element => {
   const { data: drawioUri } = useDrawioUri();
-  const { data: personalSettingsInfo } = usePersonalSettings();
+  const { data: personalSettingsInfo } = usePersonalSettings({
+    // make immutable
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+  });
 
   const { data: drawioModalData, close: closeDrawioModal } = useDrawioModal();
   const isOpened = drawioModalData?.isOpened ?? false;

packages/app/src/stores/editor.tsx

@@ -89,7 +89,7 @@ export const useCurrentIndentSize = (): SWRResponse<number, Error> => {
 */
 export const useSWRxSlackChannels = (currentPagePath: Nullable<string>): SWRResponse<string[], Error> => {
   const shouldFetch: boolean = currentPagePath != null;
-  return useSWR(
+  return useSWRImmutable(
     shouldFetch ? ['/pages.updatePost', currentPagePath] : null,
     (endpoint, path) => apiGet(endpoint, { path }).then((response: SlackChannels) => response.updatePost),
     { fallbackData: [''] },

packages/app/src/stores/in-app-notification.ts

@@ -1,4 +1,4 @@
-import useSWR, { SWRResponse } from 'swr';
+import useSWR, { SWRConfiguration, SWRResponse } from 'swr';
 
 import type { InAppNotificationStatuses, IInAppNotification, PaginateResult } from '~/interfaces/in-app-notification';
 import { parseSnapshot } from '~/models/serializers/in-app-notification-snapshot/page';
@@ -15,6 +15,7 @@ export const useSWRxInAppNotifications = <Data, Error>(
   limit: number,
   offset?: number,
   status?: InAppNotificationStatuses,
+  config?: SWRConfiguration,
 ): SWRResponse<PaginateResult<IInAppNotification>, Error> => {
   return useSWR(
     ['/in-app-notification/list', limit, offset, status],
@@ -30,6 +31,7 @@ export const useSWRxInAppNotifications = <Data, Error>(
       });
       return inAppNotificationPaginateResult;
     }),
+    config,
   );
 };
 

packages/app/src/stores/personal-settings.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'next-i18next';
-import useSWR, { SWRResponse } from 'swr';
+import useSWR, { SWRConfiguration, SWRResponse } from 'swr';
 
 
 import { IExternalAccount } from '~/interfaces/external-account';
@@ -13,10 +13,11 @@ import { useStaticSWR } from './use-static-swr';
 const logger = loggerFactory('growi:stores:personal-settings');
 
 
-export const useSWRxPersonalSettings = (): SWRResponse<IUser, Error> => {
+export const useSWRxPersonalSettings = (config?: SWRConfiguration): SWRResponse<IUser, Error> => {
   return useSWR(
     '/personal-setting',
     endpoint => apiv3Get(endpoint).then(response => response.data.currentUser),
+    config,
   );
 };
 
@@ -27,9 +28,9 @@ export type IPersonalSettingsInfoOption = {
   disassociateLdapAccount: (account: { providerType: string, accountId: string }) => Promise<void>,
 }
 
-export const usePersonalSettings = (): SWRResponse<IUser, Error> & IPersonalSettingsInfoOption => {
+export const usePersonalSettings = (config?: SWRConfiguration): SWRResponse<IUser, Error> & IPersonalSettingsInfoOption => {
   const { i18n } = useTranslation();
-  const { data: personalSettingsDataFromDB, mutate: revalidate } = useSWRxPersonalSettings();
+  const { data: personalSettingsDataFromDB, mutate: revalidate } = useSWRxPersonalSettings(config);
   const key = personalSettingsDataFromDB != null ? 'personalSettingsInfo' : null;
 
   const swrResult = useStaticSWR<IUser, Error>(key, undefined, { fallbackData: personalSettingsDataFromDB });

packages/app/src/stores/user.tsx

@@ -12,7 +12,11 @@ export const useSWRxUsersList = (userIds: string[]): SWRResponse<IUserHasId[], E
     (endpoint, userIds) => apiv3Get(endpoint, { userIds: userIds.join(',') }).then((response) => {
       return response.data.users;
     }),
-    { use: [checkAndUpdateImageUrlCached] },
+    {
+      use: [checkAndUpdateImageUrlCached],
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    },
   );
 };