fix: handle partial patch payload (#80)

* add handling of partial patch payload

* added gitpod config

Author: mariusheine

.gitpod.yml

@@ -0,0 +1,10 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - before: npm install -g pnpm@7
+    init: pnpm install
+    command: pnpm run start

src/useFind.ts

@@ -34,18 +34,20 @@ function loadServiceEventHandlers<
   };
 
   const onItemChanged = (changedItem: M): void => {
+    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
-    if (!params.value || (params.value.query !== undefined && !sift(params.value.query)(changedItem))) {
+    if (!params.value || (params.value.query !== undefined && !sift(params.value.query)(newItem))) {
       // remove item from the list if they have been on it before
-      data.value = data.value.filter((item) => getId(item) !== getId(changedItem));
+      data.value = data.value.filter((item) => getId(item) !== getId(newItem));
       return;
     }
 
-    const itemIndex = data.value.findIndex((item) => getId(item) === getId(changedItem));
+    const itemIndex = data.value.findIndex((item) => getId(item) === getId(newItem));
     if (itemIndex === -1) {
-      data.value = [...data.value, changedItem];
+      data.value = [...data.value, newItem];
     } else {
-      data.value = [...data.value.slice(0, itemIndex), changedItem, ...data.value.slice(itemIndex + 1)];
+      data.value = [...data.value.slice(0, itemIndex), newItem, ...data.value.slice(itemIndex + 1)];
     }
   };
 

src/useGet.ts

@@ -27,7 +27,7 @@ function loadServiceEventHandlers<
 
   const onItemChanged = (item: M): void => {
     if (_id.value === getId(item)) {
-      data.value = item;
+      data.value = { ...data.value, ...item };
     }
   };
 

test/useFind.test.ts

@@ -13,6 +13,7 @@ const testModel: TestModel = { _id: '111', mood: '😀', action: '🧘', categor
 const additionalTestModel: TestModel = { _id: 'aaa', mood: '🤩', action: '🏄', category: 'sport' };
 const additionalTestModel2: TestModel = { _id: 'bbb', mood: '', action: '', category: 'sport' };
 const changedTestModel: TestModel = { ...testModel, mood: '😅', action: '🏋️', category: 'sport' };
+const partialChangedTestModel: Partial<TestModel> = { _id: '111', action: '🏋️', category: 'sport' };
 const testModels: TestModel[] = [testModel, additionalTestModel2];
 
 describe('Find composition', () => {
@@ -843,6 +844,38 @@ describe('Find composition', () => {
       expect(findComposition && findComposition.data.value).toStrictEqual([changedTestModel]);
     });
 
+    it('should handle "patch" events with partial responses properly', async () => {
+      expect.assertions(2);
+
+      // given
+      const emitter = eventHelper();
+      const feathersMock = {
+        service: () => ({
+          find: vi.fn(() => testModels),
+          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');
+      });
+      await nextTick();
+
+      // when
+      emitter.emit('patched', partialChangedTestModel);
+
+      // then
+      expect(findComposition).toBeTruthy();
+      expect(findComposition && findComposition.data.value).toContainEqual({
+        ...testModel,
+        ...partialChangedTestModel,
+      });
+    });
+
     it('should listen to "remove" events', async () => {
       expect.assertions(2);
 

test/useGet.test.ts

@@ -12,6 +12,7 @@ import TestModel from '$/__helpers__/TestModel';
 const testModel: TestModel = { _id: '111', mood: '😀', action: '🧘', category: 'enjoy' };
 const additionalTestModel: TestModel = { _id: 'aaa', mood: '🤩', action: '🏄', category: 'sport' };
 const changedTestModel: TestModel = { ...testModel, mood: '😅', action: '🏋️', category: 'sport' };
+const partialChangedTestModel: Partial<TestModel> = { _id: '111', action: '🏋️', category: 'sport' };
 
 describe('Get composition', () => {
   beforeEach(() => {
@@ -504,6 +505,38 @@ describe('Get composition', () => {
       expect(getComposition && getComposition.data.value).toStrictEqual(testModel);
     });
 
+    it('should handle "patch" events with partial responses properly', async () => {
+      expect.assertions(3);
+
+      // given
+      const emitter = eventHelper();
+      const feathersMock = {
+        service: () => ({
+          get: vi.fn(() => testModel),
+          on: emitter.on,
+          off: vi.fn(),
+        }),
+        on: vi.fn(),
+        off: vi.fn(),
+      } as unknown as Application;
+      const useGet = useGetOriginal(feathersMock);
+      let getComposition = null as UseGet<TestModel> | null;
+      mountComposition(() => {
+        getComposition = useGet('testModels', ref(testModel._id));
+      });
+
+      // before then to ensure previous state
+      await nextTick();
+      expect(getComposition && getComposition.data.value).toStrictEqual(testModel);
+
+      // when
+      emitter.emit('patched', partialChangedTestModel);
+
+      // then
+      expect(getComposition).toBeTruthy();
+      expect(getComposition && getComposition.data.value).toStrictEqual({ ...testModel, ...partialChangedTestModel });
+    });
+
     it('should listen to "remove" events', async () => {
       expect.assertions(3);