Fix patching to update only existing props

Author: alexcode

lib/Actions.ts

@@ -1,6 +1,7 @@
 import { ActionContext, Commit, ActionTree, Action } from "vuex";
 import { AxiosInstance, Method } from "axios";
 import at from "lodash-es/at";
+import cloneDeep from "lodash-es/cloneDeep";
 import flatMap from "lodash-es/flatMap";
 import forEach from "lodash-es/forEach";
 import get from "lodash-es/get";
@@ -16,11 +17,13 @@ import { applyModifier, formatUrl } from "./utils";
 class ActionBase<S, R> {
   private _axios: AxiosInstance;
   private _models: ModelTypeTree;
-  private _dataPath: string | undefined;
+  private _dataPath = "data";
   constructor(axios: AxiosInstance, models: ModelTypeTree, dataPath?: string) {
     this._axios = axios;
     this._models = models;
-    this._dataPath = dataPath;
+    if (dataPath) {
+      this._dataPath = `${this._dataPath}.${dataPath}`;
+    }
 
     // add watched changes to queue
     // this.queueActionWatcher = (
@@ -62,10 +65,11 @@ class ActionBase<S, R> {
     return this._axios
       .get(formatUrl(payload), payload.axiosConfig)
       .then(async result => {
-        const resultData = this._dataPath
-          ? get(result.data, this._dataPath)
-          : result.data;
-        commit(`ADD_${this._getModel(payload).name.toUpperCase()}`, resultData);
+        const resultData = get(result, this._dataPath);
+        commit(
+          `ADD_${this._getModel(payload).name.toUpperCase()}`,
+          cloneDeep(resultData)
+        );
         return resultData;
       });
   }
@@ -88,10 +92,11 @@ class ActionBase<S, R> {
     };
     const config = { ...mainConfig, ...payload.axiosConfig };
     return this._axios(config).then(result => {
-      const resultData = this._dataPath
-        ? get(result.data, this._dataPath)
-        : result.data;
-      commit(`ADD_${this._getModel(payload).name.toUpperCase()}`, resultData);
+      const resultData = get(result, this._dataPath);
+      commit(
+        `ADD_${this._getModel(payload).name.toUpperCase()}`,
+        cloneDeep(resultData)
+      );
       return resultData;
     });
   }

lib/ApiStore.ts

@@ -44,22 +44,18 @@ export default class ApiStore<S> implements StoreOptions<S> {
       this.state[modelIdx] = model.type;
 
       // adding ADD_* mutations
-      this.mutations[`ADD_${model.name.toUpperCase()}`] = (
+      this.mutations[`ADD_${model.name.toUpperCase()}`] = async (
         myState: ApiState,
         item: IndexedObject | Array<IndexedObject>
-      ) =>
-        applyModifier("afterGet", modelKey, this.models, item).then(
-          (i: IndexedObject) => {
-            this.storeOriginItem(
-              get(myState, `${modelIdx}.originItems`),
-              i,
-              model.beforeQueue
-            );
-            this.patchEntity(myState, model, i);
-            // this.linkReferences(i, myState, model.references);
-            myState[modelIdx].lastLoad = new Date();
-          }
+      ) => {
+        const res = await this.patchEntity(myState, model, item);
+        this.storeOriginItem(
+          get(myState, `${modelIdx}.originItems`),
+          res,
+          model.beforeQueue
         );
+        myState[modelIdx].lastLoad = new Date();
+      };
 
       // adding DELETE_* mutations
       this.mutations[`DELETE_${model.name.toUpperCase()}`] = (
@@ -200,20 +196,34 @@ export default class ApiStore<S> implements StoreOptions<S> {
       const store = state[model.plural];
 
       if (has(store.items, entity.id)) {
-        forEach(entity, (value, idx: string) => {
-          if (!isFunction(value)) {
-            if (!isEqual(value, get(store.items[entity.id], idx))) {
-              Vue.set(store.items[entity.id], idx, value);
+        forEach(entity, (value, name: string) => {
+          if (!isFunction(value) && !has(model.references, name)) {
+            const storeEntity = store.items[entity.id];
+            if (
+              has(storeEntity, name) &&
+              !isEqual(value, get(storeEntity, name))
+            ) {
+              Vue.set(storeEntity, name, value);
             }
           }
         });
 
         return store.items[entity.id];
       } else {
-        store.items = { ...store.items, [entity.id]: entity };
-        this.storeOriginItem(store.originItems, entity, model.beforeQueue);
+        const toStoreEntity = await applyModifier(
+          "afterGet",
+          model.name.toLowerCase(),
+          this.models,
+          entity
+        );
+        store.items = { ...store.items, [entity.id]: toStoreEntity };
+        this.storeOriginItem(
+          store.originItems,
+          toStoreEntity,
+          model.beforeQueue
+        );
 
-        return entity;
+        return toStoreEntity;
       }
     }
   }
@@ -224,15 +234,8 @@ export default class ApiStore<S> implements StoreOptions<S> {
     modelName: string,
     prop: string
   ) {
-    const refEntity = await applyModifier(
-      "afterGet",
-      modelName,
-      this.models,
-      entity[prop]
-    );
-
     if (has(this.models, modelName)) {
-      return this.patchEntity(state, this.models[modelName], refEntity);
+      return this.patchEntity(state, this.models[modelName], entity[prop]);
     } else {
       // eslint-disable-next-line no-console
       console.warn(

tests/unit/apistore.spec.ts

@@ -5,7 +5,6 @@ import axios from "axios";
 import flushPromises from "flush-promises";
 import size from "lodash-es/size";
 import forEach from "lodash-es/forEach";
-import cloneDeep from "lodash-es/cloneDeep";
 import ApiStorePlugin from "../../lib/ApiStorePlugin";
 import ApiState from "../../lib/ApiState";
 
@@ -134,23 +133,27 @@ describe("ApiStore by default", function() {
   });
 
   it("test force fetch", async () => {
-    const singleResource = cloneDeep(data[0]);
     await fillStore();
     // Uncomment the following line and set expect(mock.history.get.length).toBe(1);
     // when the next axios-mock-adapter version (current v1.16.0) is released
     // mock.resetHistory();
-    singleResource.newData = "new_stuff";
-    mock.onGet(`/resource/${singleResource.id}`).reply(200, singleResource);
-    store.dispatch("api/get", {
-      id: singleResource.id,
+    store.getters["api/resources"].items[data[0].id].name = "changed name";
+    store.getters["api/resources"].items[data[0].id].newData = "new_stuff";
+    mock.onGet(`/resource/${data[0].id}`).reply(200, data[0]);
+    const res = await store.dispatch("api/get", {
+      id: data[0].id,
       type: "resource",
       forceFetch: true
     });
     await flushPromises();
     expect(mock.history.get.length).toBe(2);
-    expect(
-      store.getters["api/resources"].items[singleResource.id]
-    ).toStrictEqual(singleResource);
+    expect(store.getters["api/resources"].items[data[0].id].name).not.toBe(
+      "changed name"
+    );
+    expect(store.getters["api/resources"].items[data[0].id].newData).toBe(
+      "new_stuff"
+    );
+    expect(res).toStrictEqual(data[0]);
   });
 
   it("test if references are proper ref", async () => {

tests/unit/apistoreCustomModel.spec.ts

@@ -459,7 +459,9 @@ describe("ApiStore custom model", function() {
     mock.onGet(`/user/${user.id}`).reply(200, user);
     store.dispatch("api/get", {
       id: user.id,
-      type: "user"
+      type: "user",
+      forceFetch: true,
+      clear: false
     });
     await flushPromises();
     expect(store.getters["api/users"].items[user.id].localProp).toBe(true);