From 913ad0c5d4bc5dc4899552d74a2863637cb0195a Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 15 Aug 2024 13:20:29 +0800
Subject: [PATCH] More cache key debugging

---
 .../templates/library/LibraryContainer.tsx    | 22 ++++++++++++++--
 .../library_items/useLibraryItems.tsx         | 26 +++++++------------
 packages/web/pages/l/[section].tsx            |  6 +++++
 3 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
index e9d6e97de..f774ea3bb 100644
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ b/packages/web/components/templates/library/LibraryContainer.tsx
@@ -54,7 +54,11 @@ 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 { QueryClient, useQueryClient } from '@tanstack/react-query'
+import {
+  InfiniteData,
+  QueryClient,
+  useQueryClient,
+} from '@tanstack/react-query'
 import { useGetViewer } from '../../../lib/networking/viewer/useGetViewer'
 
 export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
@@ -86,7 +90,7 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
   const [searchResults, setSearchResults] = useState<SearchItem[]>([])
 
   const defaultQuery = {
-    limit: 5,
+    limit: 10,
     folder: props.folder,
     sortDescending: true,
     searchQuery: undefined,
@@ -210,6 +214,20 @@ 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 activateCard = useCallback(
     (id: string) => {
       if (!document.getElementById(id)) {
diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index aefc4c39a..c898dfd91 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -202,7 +202,6 @@ export const insertItemInCache = (
           },
         ]
         data.pages[0] = firstPage
-        console.log('data: ', data)
         return data
       }
     })
@@ -222,7 +221,8 @@ export function useGetLibraryItems(
   return useInfiniteQuery({
     // If no folder is specified cache this as `home`
     queryKey: ['libraryItems', folder ?? 'home', fullQuery],
-    queryFn: async ({ pageParam }) => {
+    queryFn: async ({ queryKey, pageParam }) => {
+      console.log('querying: ', pageParam, fullQuery, queryKey)
       const response = (await gqlFetcher(gqlSearchQuery(includeCount), {
         after: pageParam,
         first: limit,
@@ -233,24 +233,18 @@ export function useGetLibraryItems(
     },
     enabled,
     initialPageParam: '0',
-    getNextPageParam: (lastPage: LibraryItems) => {
-      console.log(
-        'lastPage.pageInfo.hasNextPage: ',
-        lastPage.pageInfo.hasNextPage,
-        'lastPage?.pageInfo?.endCursor:',
-        lastPage?.pageInfo?.endCursor
-      )
+    getNextPageParam: (lastPage: LibraryItems, pages) => {
+      console.log('getting next page: ', pages)
       return lastPage.pageInfo.hasNextPage
         ? lastPage?.pageInfo?.endCursor
         : undefined
     },
-    // getPreviousPageParam: (firstPage, pages) => {
-    //   return firstPage.pageInfo.hasPreviousPage
-    //     ? firstPage?.pageInfo?.startCursor
-    //     : undefined
-    //   // console.log('getPreviousPageParam: firstPage, pages', firstPage, pages)
-    //   // return undefined
-    // },
+    getPreviousPageParam: (firstPage, pages) => {
+      console.log('firstPage.pageInfo', firstPage?.pageInfo?.startCursor)
+      return firstPage.pageInfo.hasPreviousPage
+        ? firstPage?.pageInfo?.startCursor
+        : undefined
+    },
   })
 }
 
diff --git a/packages/web/pages/l/[section].tsx b/packages/web/pages/l/[section].tsx
index 522563e89..cb75330ec 100644
--- a/packages/web/pages/l/[section].tsx
+++ b/packages/web/pages/l/[section].tsx
@@ -45,6 +45,7 @@ export default function Home(): JSX.Element {
         // return <HomeContainer />
         return (
           <LibraryContainer
+            key={name}
             folder={undefined}
             filterFunc={(item) => {
               return (
@@ -59,6 +60,7 @@ export default function Home(): JSX.Element {
       case 'library':
         return (
           <LibraryContainer
+            key={name}
             folder="inbox"
             filterFunc={(item) => {
               return (
@@ -73,6 +75,7 @@ export default function Home(): JSX.Element {
       case 'subscriptions':
         return (
           <LibraryContainer
+            key={name}
             folder="following"
             filterFunc={(item) => {
               return (
@@ -87,6 +90,7 @@ export default function Home(): JSX.Element {
       case 'search':
         return (
           <LibraryContainer
+            key={name}
             folder={undefined}
             filterFunc={(item) => {
               console.log('item: ', item)
@@ -98,6 +102,7 @@ export default function Home(): JSX.Element {
       case 'archive':
         return (
           <LibraryContainer
+            key={name}
             folder="archive"
             filterFunc={(item) => {
               return item.state == 'ARCHIVED'
@@ -108,6 +113,7 @@ export default function Home(): JSX.Element {
       case 'trash':
         return (
           <LibraryContainer
+            key={name}
             folder="trash"
             filterFunc={(item) => {
               return item.state == 'DELETED'