fix(query): pagination + cache-and-fetch + gc was incorrectly gcing items from previous pages

Author: Akryum

packages/vue/src/query.ts

@@ -467,9 +467,12 @@ export function createQuery<
           }).then(async (backgroundResult) => {
             const { valid } = await setPageResult(page, savedPageRequestId, backgroundResult)
             if (valid && queryTracking && newQueryTracking2) {
-              queryTracking.handleQueryTracking(page.id, newQueryTracking2, undefined, finalOptions.include)
+              queryTracking.handleQueryTracking(page.id, newQueryTracking2, undefined, finalOptions.include, page.main)
             }
           })
+
+          // We don't use the builtin 'cache-and-fetch' of `find*' methods to have better control over query tracking handling
+          finalOptions.fetchPolicy = 'cache-only'
         }
 
         // On refresh force fetch

packages/vue/src/tracking.ts

@@ -34,7 +34,7 @@ export function useQueryTracking<TResult>(options: UseQueryTrackingOptions<TResu
     return res
   })
 
-  function handleQueryTracking(id: string, newQueryTracking: HookMetaQueryTracking, result?: TResult, include: FindOptionsInclude<Collection, CollectionDefaults, StoreSchema> = {}, markPreviousItemsAsDirty: boolean = true) {
+  function handleQueryTracking(id: string, newQueryTracking: HookMetaQueryTracking, result: TResult | undefined, include: FindOptionsInclude<Collection, CollectionDefaults, StoreSchema> | undefined, markPreviousItemsAsDirty: boolean) {
     if (newQueryTracking.skipped) {
       return
     }
@@ -47,6 +47,8 @@ export function useQueryTracking<TResult>(options: UseQueryTrackingOptions<TResu
 
     // Init the query tracking object if the result is not empty and there is no previous tracking
     if (!isResultEmpty && !queryTracking) {
+      include ??= {}
+
       const keys = Object.keys(newQueryTracking.items)
       const isNewQueryTrackingEmpty = keys.length === 0 || keys.every(k => newQueryTracking.items[k]!.size === 0)
 

packages/vue/test/query.spec.ts

@@ -599,5 +599,44 @@ describe('query', () => {
       expect(query.pages.value[1]?.data[0]?.text).toBe('Message 3')
       expect(query.pages.value[1]?.data[1]?.text).toBe('New Message')
     })
+
+    it('should load pages with cache-and-fetch and gc', async () => {
+      const fetchMessages = (pageIndex?: number) => {
+        return [
+          { id: `message${pageIndex! * 2 + 1}`, text: `Message ${pageIndex! * 2 + 1}` },
+          { id: `message${pageIndex! * 2 + 2}`, text: `Message ${pageIndex! * 2 + 2}` },
+        ]
+      }
+      const store = await createStore({
+        schema: [
+          {
+            name: 'messages',
+            hooks: {
+              fetchMany: ({ pageIndex }) => fetchMessages(pageIndex),
+            },
+          },
+        ],
+        plugins: [],
+      })
+
+      const query = await store.messages.query(q => q.many({
+        pageIndex: 0,
+        pageSize: 2,
+        fetchPolicy: 'cache-and-fetch',
+        experimentalGarbageCollection: true,
+      }))
+
+      expect(query.data.value?.length).toBe(2)
+
+      await query.fetchMore({
+        pageIndex: 1,
+      })
+
+      expect(query.data.value?.length).toBe(4)
+      expect(query.data.value?.[0]?.text).toBe('Message 1')
+      expect(query.data.value?.[1]?.text).toBe('Message 2')
+      expect(query.data.value?.[2]?.text).toBe('Message 3')
+      expect(query.data.value?.[3]?.text).toBe('Message 4')
+    })
   })
 })