client: optimize data fetch

pull/60/head
fantasticit 2022-05-27 21:51:21 +08:00
parent eef782f096
commit f317086d7a
6 changed files with 30 additions and 21 deletions

View File

@ -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>

View File

@ -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);

View File

@ -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 };
};

View File

@ -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(

View File

@ -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>
}
>

View File

@ -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' }}>