fix: changed or deleted data get lost while still loading in useFind (#84)

* implement event cache

Author: mariusheine

pnpm-lock.yaml

@@ -14,8 +14,16 @@ function loadServiceEventHandlers<
   service: FeathersService<CustomApplication, ServiceTypes<CustomApplication>[T]>,
   params: Ref<Params | undefined | null>,
   data: Ref<M[]>,
+  isLoading: Ref<boolean>,
 ): () => void {
+  const eventCache: (() => void)[] = [];
+
   const onCreated = (createdItem: M): void => {
+    if (isLoading.value) {
+      eventCache.push(() => onCreated(createdItem));
+      return;
+    }
+
     // ignore items not matching the query or when no params are set
     if (!params.value || (params.value.query !== undefined && !sift(params.value.query)(createdItem))) {
       return;
@@ -30,10 +38,18 @@ function loadServiceEventHandlers<
   };
 
   const onRemoved = (item: M): void => {
+    if (isLoading.value) {
+      eventCache.push(() => onRemoved(item));
+      return;
+    }
     data.value = data.value.filter((_item) => getId(_item) !== getId(item));
   };
 
   const onItemChanged = (changedItem: M): void => {
+    if (isLoading.value) {
+      eventCache.push(() => onItemChanged(changedItem));
+      return;
+    }
     const existingItem = data.value.find((item) => getId(item) === getId(changedItem));
     const newItem = { ...existingItem, ...changedItem };
     // ignore items not matching the query or when no params are set
@@ -71,6 +87,15 @@ function loadServiceEventHandlers<
     service.off('updated', onItemChanged);
   };
 
+  watch(isLoading, () => {
+    while (eventCache.length > 0 && !isLoading.value) {
+      const event = eventCache.shift();
+      if (event) {
+        event();
+      }
+    }
+  });
+
   return unloadEventHandlers;
 }
 
@@ -110,7 +135,7 @@ export default <CustomApplication extends Application>(feathers: CustomApplicati
     const error = ref<FeathersError>();
 
     const service = feathers.service(serviceName as string);
-    const unloadEventHandlers = loadServiceEventHandlers(service, params, data);
+    const unloadEventHandlers = loadServiceEventHandlers(service, params, data, isLoading);
     let unloaded = false;
 
     const currentFindCall = ref(0);

src/useFind.ts

@@ -455,7 +455,7 @@ describe('Find composition', () => {
   });
 
   describe('Event Handlers', () => {
-    it('should listen to "create" events', () => {
+    it('should listen to "create" events', async () => {
       expect.assertions(2);
 
       // given
@@ -474,6 +474,7 @@ describe('Find composition', () => {
       mountComposition(() => {
         findComposition = useFind('testModels');
       });
+      await nextTick();
 
       // when
       emitter.emit('created', additionalTestModel);
@@ -541,7 +542,7 @@ describe('Find composition', () => {
       expect(findComposition && findComposition.data.value).toContainEqual(additionalTestModel);
     });
 
-    it('should ignore "create" events when query is not matching', () => {
+    it('should ignore "create" events when query is not matching', async () => {
       expect.assertions(2);
 
       // given
@@ -560,6 +561,7 @@ describe('Find composition', () => {
       mountComposition(() => {
         findComposition = useFind('testModels', ref({ query: { mood: 'please-do-not-match' } }));
       });
+      await nextTick();
 
       // when
       emitter.emit('created', additionalTestModel);
@@ -905,6 +907,40 @@ describe('Find composition', () => {
       expect(findComposition && findComposition.data.value).not.toContainEqual(testModel);
     });
 
+    it('should cache events when still loading', async () => {
+      expect.assertions(4);
+
+      // given
+      const emitter = eventHelper();
+      const feathersMock = {
+        service: () => ({
+          find: vi.fn(() => [additionalTestModel2, testModel]),
+          on: emitter.on,
+          off: vi.fn(),
+        }),
+        on: vi.fn(),
+        off: vi.fn(),
+      } as unknown as Application;
+      const useFind = useFindOriginal(feathersMock);
+      let findComposition = null as UseFind<TestModel> | null;
+      mountComposition(() => {
+        findComposition = useFind('testModels');
+      });
+
+      // when
+      emitter.emit('updated', changedTestModel);
+      emitter.emit('created', additionalTestModel);
+      emitter.emit('removed', additionalTestModel2);
+      await nextTick();
+      await nextTick();
+
+      // then
+      expect(findComposition).toBeTruthy();
+      expect(findComposition && findComposition.data.value).toHaveLength(2);
+      expect(findComposition && findComposition.data.value[0]).toStrictEqual(changedTestModel);
+      expect(findComposition && findComposition.data.value[1]).toStrictEqual(additionalTestModel);
+    });
+
     it('should unload the event handlers', () => {
       expect.assertions(7);
 
@@ -1073,6 +1109,7 @@ describe('Find composition', () => {
         findComposition = useFind('testModels', undefined, { loadAllPages: true });
       });
       await nextTick();
+      await nextTick();
 
       // then
       expect(serviceFind).toHaveBeenCalledTimes(2);
@@ -1113,6 +1150,7 @@ describe('Find composition', () => {
         findComposition = useFind('testModels', undefined, { loadAllPages: true });
       });
       await nextTick();
+      await nextTick();
 
       // then
       expect(serviceFind).toHaveBeenCalledTimes(2);