Only allow three pages of data to be refreshed

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,

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<LibraryItems, unknown>) => ({
-  //         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<LibraryItems, unknown>) => {
+            console.log('unloading data: ', data)
+            return {
+              pages: data.pages.slice(0, 3),
+              pageParams: data.pageParams.slice(0, 3),
+            }
+          }
+        )
+      })
+    }
+  }, [queryClient])
 
   const activateCard = useCallback(
     (id: string) => {

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), {

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,

packages/web/pages/tools/bulk.tsx

@@ -33,12 +33,16 @@ export default function BulkPerformer(): JSX.Element {
   const [runningState, setRunningState] = useState<RunningState>('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)