client: optimize data fetch

packages/client/src/components/search/index.tsx

@@ -66,7 +66,7 @@ const List: React.FC<{ data: IDocument[] }> = ({ data }) => {
 
 export const Search = () => {
   const [visible, toggleVisible] = useToggle(false);
-  const { data: recentDocs } = useRecentDocuments();
+  // const { data: recentDocs } = useRecentDocuments();
   const [searchApi, loading] = useAsyncLoading(searchDocument, 10);
   const [keyword, setKeyword] = useState('');
   const [error, setError] = useState(null);
@@ -143,10 +143,10 @@ export const Search = () => {
               error={error}
               normalContent={() => <List data={searchDocs} />}
             />
-            <div style={{ marginTop: 16 }}>
+            {/* <div style={{ marginTop: 16 }}>
               <Text type="tertiary">最近访问的文档</Text>
               <List data={recentDocs} />
-            </div>
+            </div> */}
           </div>
         </div>
       </Modal>

packages/client/src/data/collector.tsx

@@ -30,7 +30,7 @@ export const getCollectedWikis = (cookie = null): Promise<IWikiWithIsMember[]> =
  */
 export const useCollectedWikis = () => {
   const { data, error, isLoading, refetch } = useQuery(CollectorApiDefinition.wikis.client(), getCollectedWikis, {
-    staleTime: 0,
+    staleTime: 500,
   });
 
   useEffect(() => {
@@ -117,7 +117,7 @@ export const useCollectedDocuments = () => {
   const { data, error, isLoading, refetch } = useQuery(
     CollectorApiDefinition.documents.client(),
     getCollectedDocuments,
-    { staleTime: 0 }
+    { staleTime: 500 }
   );
   useEffect(() => {
     event.on(TOGGLE_COLLECT_DOUCMENT, refetch);

packages/client/src/data/document.tsx

@@ -30,7 +30,7 @@ export const useRecentDocuments = () => {
   const { data, error, isLoading, refetch } = useQuery(
     DocumentApiDefinition.recent.client(),
     getRecentVisitedDocuments,
-    { staleTime: 3000 }
+    { refetchOnWindowFocus: false, enabled: false }
   );
   return { data, error, loading: isLoading, refresh: refetch };
 };

packages/client/src/data/message.ts

@@ -61,7 +61,7 @@ export const useUnreadMessages = () => {
   const { data, error, isLoading, refetch } = useQuery(
     [MessageApiDefinition.getUnread.client(), page],
     () => getMessagesApi('getUnread')(page),
-    { keepPreviousData: true, refetchInterval: 4000 }
+    { keepPreviousData: true, refetchInterval: 5000 }
   );
 
   const readMessage = useCallback(

packages/client/src/layouts/router-header/recent.tsx

@@ -6,16 +6,23 @@ import { Empty } from 'components/empty';
 import { IconDocumentFill } from 'components/icons/IconDocumentFill';
 import { LocaleTime } from 'components/locale-time';
 import { useRecentDocuments } from 'data/document';
+import { useToggle } from 'hooks/use-toggle';
 import Link from 'next/link';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import styles from './index.module.scss';
 import { Placeholder } from './placeholder';
 
 const { Text } = Typography;
 
-export const RecentDocs = () => {
-  const { data: recentDocs, loading, error } = useRecentDocuments();
+export const RecentDocs = ({ visible }) => {
+  const { data: recentDocs, loading, error, refresh } = useRecentDocuments();
+
+  useEffect(() => {
+    if (visible) {
+      refresh();
+    }
+  }, [visible, refresh]);
 
   return (
     <Tabs type="line" size="small">
@@ -27,7 +34,7 @@ export const RecentDocs = () => {
           normalContent={() => {
             return (
               <div className={styles.itemsWrap} style={{ margin: '0 -16px' }}>
-                {recentDocs.length ? (
+                {recentDocs && recentDocs.length ? (
                   recentDocs.map((doc) => {
                     return (
                       <div className={styles.itemWrap} key={doc.id}>
@@ -85,7 +92,7 @@ export const RecentModal = ({ visible, toggleVisible }) => {
       style={{ maxWidth: '96vw' }}
     >
       <div style={{ paddingBottom: 24 }}>
-        <RecentDocs />
+        <RecentDocs visible={visible} />
       </div>
     </Modal>
   );
@@ -96,14 +103,18 @@ export const RecentMobileTrigger = ({ toggleVisible }) => {
 };
 
 export const Recent = () => {
+  const [visible, toggleVisible] = useToggle(false);
+
   return (
     <span>
       <Dropdown
         trigger="click"
         spacing={16}
+        visible={visible}
+        onVisibleChange={toggleVisible}
         content={
           <div style={{ width: 300, padding: '16px 16px 0' }}>
-            <RecentDocs />
+            <RecentDocs visible={visible} />
           </div>
         }
       >

packages/client/src/pages/index.tsx

@@ -13,7 +13,7 @@ import { useToggle } from 'hooks/use-toggle';
 import { SingleColumnLayout } from 'layouts/single-column';
 import type { NextPage } from 'next';
 import Link from 'next/link';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { serverPrefetcher } from 'services/server-prefetcher';
 
 import styles from './index.module.scss';
@@ -78,19 +78,17 @@ const RecentDocs = () => {
         key="operate"
         width={80}
         render={(_, document) => (
-          <DocumentActions
-            wikiId={document.wikiId}
-            documentId={document.id}
-            onStar={refresh}
-            onDelete={refresh}
-            showCreateDocument
-          />
+          <DocumentActions wikiId={document.wikiId} documentId={document.id} onDelete={refresh} showCreateDocument />
         )}
       />,
     ],
     [refresh]
   );
 
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
   return (
     <>
       <Title heading={3} style={{ margin: '24px 0 0' }}>