create useSWRMUTxPageRevision

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

@@ -1,11 +1,11 @@
 import React, { useEffect, useState, useCallback } from 'react';
 
-import { Ref, IRevision, IRevisionHasId } from '@growi/core';
+import { IRevisionHasId } from '@growi/core';
 import { useTranslation } from 'next-i18next';
 import { Waypoint } from 'react-waypoint';
 
-import { apiv3Get } from '~/client/util/apiv3-client';
 import { RendererOptions } from '~/services/renderer/renderer';
+import { useSWRMUTxPageRevision } from '~/stores/page';
 import loggerFactory from '~/utils/logger';
 
 import RevisionRenderer from './RevisionRenderer';
@@ -15,7 +15,7 @@ export const ROOT_ELEM_ID = 'revision-loader' as const;
 export type RevisionLoaderProps = {
   rendererOptions: RendererOptions,
   pageId: string,
-  revisionId: Ref<IRevision>,
+  revisionId: string,
   lazy?: boolean,
   onRevisionLoaded?: (revision: IRevisionHasId) => void,
 }
@@ -37,6 +37,8 @@ export const RevisionLoader = (props: RevisionLoaderProps): JSX.Element => {
     rendererOptions, pageId, revisionId, lazy, onRevisionLoaded,
   } = props;
 
+  const { trigger: mutatePageRevision } = useSWRMUTxPageRevision(pageId, revisionId);
+
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [isLoaded, setIsLoaded] = useState<boolean>(false);
   const [markdown, setMarkdown] = useState<string>('');
@@ -49,13 +51,12 @@ export const RevisionLoader = (props: RevisionLoaderProps): JSX.Element => {
 
     // load data with REST API
     try {
-      const res = await apiv3Get(`/revisions/${revisionId}`, { pageId });
+      const pageRevision = await mutatePageRevision();
 
-      setMarkdown(res.data?.revision?.body);
-      setErrors(null);
+      setMarkdown(pageRevision?.body ?? '');
 
-      if (onRevisionLoaded != null) {
-        onRevisionLoaded(res.data.revision);
+      if (onRevisionLoaded != null && pageRevision != null) {
+        onRevisionLoaded(pageRevision);
       }
     }
     catch (errors) {
@@ -66,7 +67,7 @@ export const RevisionLoader = (props: RevisionLoaderProps): JSX.Element => {
       setIsLoading(false);
     }
 
-  }, [isLoaded, isLoading, onRevisionLoaded, pageId, revisionId]);
+  }, [isLoaded, isLoading, mutatePageRevision, onRevisionLoaded]);
 
   useEffect(() => {
     if (!lazy) {

packages/app/src/interfaces/revision.ts

@@ -1,3 +1,3 @@
 export type {
-  IRevision, IRevisionsForPagination, IRevisionOnConflict, HasRevisionShortbody,
+  IRevision, IRevisionHasId, IRevisionsForPagination, IRevisionOnConflict, HasRevisionShortbody,
 } from '@growi/core';

packages/app/src/stores/page.tsx

@@ -14,7 +14,7 @@ import {
   IPageInfo, IPageInfoForOperation,
 } from '~/interfaces/page';
 import { IRecordApplicableGrant, IResIsGrantNormalized } from '~/interfaces/page-grant';
-import { IRevisionsForPagination } from '~/interfaces/revision';
+import { IRevisionHasId, IRevisionsForPagination } from '~/interfaces/revision';
 
 import { IPageTagsInfo } from '../interfaces/tag';
 
@@ -135,6 +135,16 @@ export const useSWRxPageInfo = (
   return swrResult;
 };
 
+
+export const useSWRMUTxPageRevision = (pageId: string, revisionId: string): SWRMutationResponse<IRevisionHasId> => {
+  const key = 'pageRevision';
+
+  return useSWRMutation(
+    key,
+    () => apiv3Get<{ revision: IRevisionHasId }>(`/revisions/${revisionId}`, { pageId }).then(result => result.data.revision),
+  );
+};
+
 export const useSWRxPageRevisions = (
     page: number, // page number of pagination
     limit: number, // max number of pages in one paginate