useSWRMutation -> useSWRImmutable

packages/app/src/components/Page/RevisionLoader.tsx

@@ -1,10 +1,10 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { Ref, IRevision, IRevisionHasId } from '@growi/core';
 import { useTranslation } from 'next-i18next';
 
 import { RendererOptions } from '~/services/renderer/renderer';
-import { useSWRMUTxPageRevision } from '~/stores/page';
+import { useSWRxPageRevision } from '~/stores/page';
 import loggerFactory from '~/utils/logger';
 
 import RevisionRenderer from './RevisionRenderer';
@@ -35,40 +35,37 @@ export const RevisionLoader = (props: RevisionLoaderProps): JSX.Element => {
     rendererOptions, pageId, revisionId, onRevisionLoaded,
   } = props;
 
-  const { trigger: mutatePageRevision, isMutating } = useSWRMUTxPageRevision(pageId, revisionId);
+  const { data: pageRevision, isLoading, error } = useSWRxPageRevision(pageId, revisionId);
 
   const [markdown, setMarkdown] = useState<string>('');
 
-  const loadData = useCallback(async() => {
-    try {
-      const pageRevision = await mutatePageRevision();
-
+  useEffect(() => {
+    if (pageRevision != null) {
       setMarkdown(pageRevision?.body ?? '');
 
-      if (onRevisionLoaded != null && pageRevision != null) {
+      if (onRevisionLoaded != null) {
         onRevisionLoaded(pageRevision);
       }
     }
-    catch (errors) {
-      const isForbidden = errors != null && errors[0].code === 'forbidden-page';
+
+  }, [onRevisionLoaded, pageRevision]);
+
+  useEffect(() => {
+    if (error != null) {
+      const isForbidden = error != null && error[0].code === 'forbidden-page';
       if (isForbidden) {
         setMarkdown(`<i class="icon-exclamation p-1"></i>${t('not_allowed_to_see_this_page')}`);
       }
       else {
-        const errorMessages = errors.map((error) => {
+        const errorMessages = error.map((error) => {
           return `<i class="icon-exclamation p-1"></i><span class="text-muted"><em>${error.message}</em></span>`;
         });
         setMarkdown(errorMessages.join('\n'));
       }
     }
+  }, [error, t]);
 
-  }, [mutatePageRevision, onRevisionLoaded, t]);
-
-  useEffect(() => {
-    loadData();
-  }, [loadData]);
-
-  if (isMutating) {
+  if (isLoading) {
     return (
       <div className="wiki">
         <div className="text-muted text-center">

packages/app/src/stores/page.tsx

@@ -135,34 +135,11 @@ export const useSWRxPageInfo = (
   return swrResult;
 };
 
-const useSWRxPageRevision = (revisionId: Ref<IRevision>): SWRResponse<IRevisionHasId> => {
-  const key = `/revisions/${revisionId}`;
-
-  return useSWR(key, null, {
-    keepPreviousData: true,
-  });
-};
-
-export const useSWRMUTxPageRevision = (pageId: string, revisionId: Ref<IRevision>): SWRMutationResponse<IRevisionHasId> => {
-  const key = `/revisions/${revisionId}`;
-
-  const { data: pageRevisionData } = useSWRxPageRevision(revisionId);
-
-  const fetcher = useCallback(async() => {
-    if (pageRevisionData != null) {
-      return pageRevisionData;
-    }
-
-    const res = await apiv3Get<{ revision: IRevisionHasId }>(`/revisions/${revisionId}`, { pageId });
-    return res.data.revision;
-  }, [pageId, pageRevisionData, revisionId]);
-
-  return useSWRMutation(
+export const useSWRxPageRevision = (pageId: string, revisionId: Ref<IRevision>): SWRResponse<IRevisionHasId> => {
+  const key = [`/revisions/${revisionId}`, pageId, revisionId];
+  return useSWRImmutable(
     key,
-    fetcher,
-    {
-      populateCache: true,
-    },
+    () => apiv3Get<{ revision: IRevisionHasId }>(`/revisions/${revisionId}`, { pageId }).then(response => response.data.revision),
   );
 };