From 3ceb18400cea754e9936492159ce6a6852160cfe Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 15 Aug 2024 15:24:02 +0800 Subject: [PATCH] Only allow three pages of data to be refreshed --- .../nav-containers/HomeContainer.tsx | 1 + .../templates/library/LibraryContainer.tsx | 43 +++++++++++-------- .../library_items/useLibraryItems.tsx | 4 +- packages/web/pages/settings/account.tsx | 2 +- packages/web/pages/tools/bulk.tsx | 16 ++++--- 5 files changed, 38 insertions(+), 28 deletions(-) diff --git a/packages/web/components/nav-containers/HomeContainer.tsx b/packages/web/components/nav-containers/HomeContainer.tsx index b6f80a65f..e4dabc403 100644 --- a/packages/web/components/nav-containers/HomeContainer.tsx +++ b/packages/web/components/nav-containers/HomeContainer.tsx @@ -211,6 +211,7 @@ export function HomeContainer(): JSX.Element { const shouldFallback = homeData.error || (!homeData.isValidating && !hasTopPicks(homeData)) const searchData = useGetLibraryItems( + 'home', undefined, { limit: 10, diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx index f774ea3bb..26cda5a09 100644 --- a/packages/web/components/templates/library/LibraryContainer.tsx +++ b/packages/web/components/templates/library/LibraryContainer.tsx @@ -54,11 +54,7 @@ import { theme } from '../../tokens/stitches.config' import { emptyTrashMutation } from '../../../lib/networking/mutations/emptyTrashMutation' import { State } from '../../../lib/networking/fragments/articleFragment' import { useHandleAddUrl } from '../../../lib/hooks/useHandleAddUrl' -import { - InfiniteData, - QueryClient, - useQueryClient, -} from '@tanstack/react-query' +import { InfiniteData, useQueryClient } from '@tanstack/react-query' import { useGetViewer } from '../../../lib/networking/viewer/useGetViewer' export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT' @@ -125,7 +121,7 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element { fetchNextPage, hasNextPage, error: fetchItemsError, - } = useGetLibraryItems(props.folder, queryInputs) + } = useGetLibraryItems(props.folder ?? 'home', props.folder, queryInputs) useEffect(() => { if (queryValue.startsWith('#')) { @@ -214,19 +210,28 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element { activateCard(firstItem.node.id) }, [libraryItems]) - // const queryClient = useQueryClient() - // useEffect(() => { - // return () => { - // console.log('clearing old items') - // queryClient.setQueryData( - // ['libraryItems'], - // (data: InfiniteData) => ({ - // pages: data.pages.slice(0, 1), - // pageParams: data.pageParams.slice(0, 1), - // }) - // ) - // } - // }, []) + const queryClient = useQueryClient() + useEffect(() => { + return () => { + const keys = queryClient + .getQueryCache() + .findAll({ queryKey: ['libraryItems', props.folder ?? 'home'] }) + + keys.forEach((query) => { + console.log('clearing old items') + queryClient.setQueryData( + query.queryKey, + (data: InfiniteData) => { + console.log('unloading data: ', data) + return { + pages: data.pages.slice(0, 3), + pageParams: data.pageParams.slice(0, 3), + } + } + ) + }) + } + }, [queryClient]) const activateCard = useCallback( (id: string) => { diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx index c898dfd91..eca1eb681 100644 --- a/packages/web/lib/networking/library_items/useLibraryItems.tsx +++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx @@ -209,6 +209,7 @@ export const insertItemInCache = ( } export function useGetLibraryItems( + section: string, folder: string | undefined, { limit, searchQuery, includeCount }: LibraryItemsQueryInput, enabled = true @@ -217,10 +218,9 @@ export function useGetLibraryItems( ? (`in:${folder} use:folders ` + (searchQuery ?? '')).trim() : searchQuery ?? '' - console.log('fullQuery: ', fullQuery) return useInfiniteQuery({ // If no folder is specified cache this as `home` - queryKey: ['libraryItems', folder ?? 'home', fullQuery], + queryKey: ['libraryItems', section, fullQuery], queryFn: async ({ queryKey, pageParam }) => { console.log('querying: ', pageParam, fullQuery, queryKey) const response = (await gqlFetcher(gqlSearchQuery(includeCount), { diff --git a/packages/web/pages/settings/account.tsx b/packages/web/pages/settings/account.tsx index a86ad183e..40d215c91 100644 --- a/packages/web/pages/settings/account.tsx +++ b/packages/web/pages/settings/account.tsx @@ -92,7 +92,7 @@ export default function Account(): JSX.Element { isUsernameValidationLoading, ]) - const { data: itemsPages, isLoading } = useGetLibraryItems('all', { + const { data: itemsPages, isLoading } = useGetLibraryItems('search', 'all', { limit: 0, searchQuery: '', sortDescending: false, diff --git a/packages/web/pages/tools/bulk.tsx b/packages/web/pages/tools/bulk.tsx index b5083f8a4..9e82a389a 100644 --- a/packages/web/pages/tools/bulk.tsx +++ b/packages/web/pages/tools/bulk.tsx @@ -33,12 +33,16 @@ export default function BulkPerformer(): JSX.Element { const [runningState, setRunningState] = useState('none') const bulkAction = useBulkActions() - const { data: itemsPages, isLoading } = useGetLibraryItems(undefined, { - searchQuery: query, - limit: 1, - sortDescending: false, - includeCount: true, - }) + const { data: itemsPages, isLoading } = useGetLibraryItems( + 'search', + undefined, + { + searchQuery: query, + limit: 1, + sortDescending: false, + includeCount: true, + } + ) useEffect(() => { setExpectedCount(itemsPages?.pages.find(() => true)?.pageInfo.totalCount)