Merge pull request #10 from vuex-orm/feature/isPersisted

isPersisted

Author: phortx

README.md

@@ -126,6 +126,12 @@ This plugin has an opinion how the GraphQL API schema should look like:
 You can see query examples in the [project wiki](https://github.com/vuex-orm/vuex-orm-apollo/wiki/Example-Queries).
 
 
+## Special record properties
+
+This plugin adds a special property to your models: `$isPersisted`, which represents if this record is persisted on
+the server. It's true for all records except newly created ones. 
+
+
 
 ## Known issues
 

dist/vuex-orm-apollo.esm.js

@@ -7867,7 +7867,11 @@ var QueryBuilder = /** @class */ (function () {
             this.context.logger.log('Transformed data:', result);
             this.context.logger.groupEnd();
         }
-        return result;
+        else {
+            result['$isPersisted'] = true;
+        }
+        // MAke sure this is really a plain JS object. We had some issues in testing here.
+        return JSON.parse(JSON.stringify(result));
     };
     /**
      * Generates the arguments string for a graphql query based on a given map.
@@ -8144,6 +8148,12 @@ var Context = /** @class */ (function () {
             throw new Error('database param is required to initialize vuex-orm-apollo!');
         }
         this.collectModels();
+        this.logger.group('Context setup');
+        this.logger.log('components', this.components);
+        this.logger.log('options', this.options);
+        this.logger.log('database', this.database);
+        this.logger.log('models', this.models);
+        this.logger.groupEnd();
     }
     /**
      * Returns a model by name
@@ -8168,8 +8178,17 @@ var Context = /** @class */ (function () {
         this.database.entities.forEach(function (entity) {
             var model = new Model(entity.model, _this);
             _this.models.set(model.singularName, model);
+            _this.augmentModel(model);
         });
     };
+    Context.prototype.augmentModel = function (model) {
+        var originalFieldGenerator = model.baseModel.fields.bind(model.baseModel);
+        model.baseModel.fields = function () {
+            var originalFields = originalFieldGenerator();
+            originalFields['$isPersisted'] = model.baseModel.attr(false);
+            return originalFields;
+        };
+    };
     return Context;
 }());
 
@@ -8308,7 +8327,7 @@ var VuexORMApollo = /** @class */ (function () {
         var state = _a.state, dispatch = _a.dispatch;
         var id = _b.id, args = _b.args;
         return __awaiter(this, void 0, void 0, function () {
-            var model, data, mutationName;
+            var model, data, mutationName, record;
             return __generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
@@ -8321,8 +8340,10 @@ var VuexORMApollo = /** @class */ (function () {
                         return [4 /*yield*/, this.mutate(mutationName, args, dispatch, model, false)];
                     case 1:
                         _c.sent();
-                        // TODO is this really necessary?
-                        return [2 /*return*/, model.baseModel.getters('find')(id)];
+                        record = model.baseModel.getters('find')(id);
+                        record.$isPersisted = true;
+                        record.$dispatch('update', { where: record.id, data: record });
+                        return [2 /*return*/, record];
                     case 2: return [2 /*return*/];
                 }
             });

src/context.ts

@@ -26,6 +26,13 @@ export default class Context {
     }
 
     this.collectModels();
+
+    this.logger.group('Context setup');
+    this.logger.log('components', this.components);
+    this.logger.log('options', this.options);
+    this.logger.log('database', this.database);
+    this.logger.log('models', this.models);
+    this.logger.groupEnd();
   }
 
   /**
@@ -49,8 +56,22 @@ export default class Context {
    */
   private collectModels () {
     this.database.entities.forEach((entity: any) => {
-      const model = new Model(entity.model as ORMModel, this);
+      const model: Model = new Model(entity.model as ORMModel, this);
       this.models.set(model.singularName, model);
+
+      this.augmentModel(model);
     });
   }
+
+  private augmentModel (model: Model) {
+    const originalFieldGenerator = model.baseModel.fields.bind(model.baseModel);
+
+    model.baseModel.fields = () => {
+      const originalFields = originalFieldGenerator();
+
+      originalFields['$isPersisted'] = model.baseModel.attr(false);
+
+      return originalFields;
+    };
+  }
 }

src/interfaces.ts

@@ -36,6 +36,7 @@ export interface ORMModel {
   fields (): any;
   dispatch (name: string, ...params: Array<any>): any;
   getters (name: string, ...params: Array<any>): any;
+  attr (defaultValue: any): Field;
 }
 
 export interface Field {

src/queryBuilder.ts

@@ -195,9 +195,12 @@ export default class QueryBuilder {
     if (!recursiveCall) {
       this.context.logger.log('Transformed data:', result);
       this.context.logger.groupEnd();
+    } else {
+      result['$isPersisted'] = true;
     }
 
-    return result;
+    // MAke sure this is really a plain JS object. We had some issues in testing here.
+    return JSON.parse(JSON.stringify(result));
   }
 
   /**

src/vuex-orm-apollo.ts

@@ -118,8 +118,12 @@ export default class VuexORMApollo {
       const mutationName = `create${upcaseFirstLetter(model.singularName)}`;
       await this.mutate(mutationName, args, dispatch, model, false);
 
-      // TODO is this really necessary?
-      return model.baseModel.getters('find')(id);
+      const record = model.baseModel.getters('find')(id);
+
+      record.$isPersisted = true;
+      record.$dispatch('update', { where: record.id, data: record });
+
+      return record;
     }
   }
 

test/integration/VuexORMApollo.spec.js

@@ -374,4 +374,75 @@ mutation SignupUser($user: UserInput!, $captchaToken: String!) {
       `.trim() + "\n");
     });
   });
+
+  describe('$isPersisted', () => {
+    it('is false for newly created records', async () => {
+      let user = await store.dispatch('entities/users/insert', { data: { name: 'Snoopy' }} );
+      expect(user.$isPersisted).toBeFalsy();
+
+      user = store.getters['entities/users/find'](user.id);
+      expect(user.$isPersisted).toBeFalsy();
+    });
+
+    it('is true for persisted records', async () => {
+      const response = {
+        data: {
+          createUser: {
+            __typename: 'user',
+            id: 1,
+            name: 'Charlie Brown',
+            posts: {
+              __typename: 'post',
+              nodes: []
+            }
+          }
+        }
+      };
+
+      await sendWithMockFetch(response, async () => {
+        await store.dispatch('entities/users/persist', { id: 1 });
+      });
+
+      const user = store.getters['entities/users/find'](1);
+      expect(user.$isPersisted).toBeTruthy();
+    });
+
+    it('is true for fetched records', async () => {
+      const response = {
+        data: {
+          user: {
+            __typename: 'user',
+            id: 1,
+            name: 'Johnny Imba',
+            posts: {
+              __typename: 'post',
+              nodes: [
+                {
+                  __typename: 'post',
+                  id: 1,
+                  userId: 1,
+                  title: 'Example Post 1',
+                  content: 'Foo'
+                },
+                {
+                  __typename: 'post',
+                  id: 2,
+                  userId: 1,
+                  title: 'Example Post 2',
+                  content: 'Bar'
+                }
+              ]
+            }
+          }
+        }
+      };
+
+      await sendWithMockFetch(response, async () => {
+        await store.dispatch('entities/users/fetch', { filter: { id: 1 } });
+      });
+
+      const user = store.getters['entities/users/find'](1);
+      expect(user.$isPersisted).toBeTruthy();
+    });
+  });
 });

test/support/Helpers.js

@@ -2,7 +2,6 @@ import _ from 'lodash';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import VuexORM, { Database, Model } from '@vuex-orm/core';
-import installVuexORMApollo from 'app';
 import fetchMock from 'fetch-mock';
 import VuexORMApolloPlugin from "app";
 

test/unit/QueryBuilder.spec.js

@@ -163,7 +163,7 @@ describe('QueryBuilder', () => {
 
 
   describe('.transformIncomingData', () => {
-    it('transforms incoming data into Vuex-ORM a readable structure', () => {
+    it('transforms incoming data into a Vuex-ORM readable structure', () => {
       const incomingData = {
         "contracts": {
           "nodes": [
@@ -218,8 +218,10 @@ describe('QueryBuilder', () => {
       const expectedData = {
         "contracts": [
           {
+            "$isPersisted": true,
             "contractOptions": [
               {
+                "$isPersisted": true,
                 "description": "Very foo, much more bar",
                 "id": 1,
                 "name": "Foo Bar 1",
@@ -231,8 +233,10 @@ describe('QueryBuilder', () => {
             "slug": "contract-s",
           },
           {
+            "$isPersisted": true,
             "contractOptions": [
               {
+                "$isPersisted": true,
                 "description": "Very foo, much more bar",
                 "id": 1,
                 "name": "Foo Bar 1",
@@ -244,8 +248,10 @@ describe('QueryBuilder', () => {
             "slug": "contract-m",
           },
           {
+            "$isPersisted": true,
             "contractOptions": [
               {
+                "$isPersisted": true,
                 "description": "Very foo, much more bar",
                 "id": 1,
                 "name": "Foo Bar 1",
@@ -266,7 +272,7 @@ describe('QueryBuilder', () => {
 
 
   describe('.transformIncomingData', () => {
-    it('transforms incoming data after a mutation into Vuex-ORM a readable structure', () => {
+    it('transforms incoming data after a mutation into a Vuex-ORM readable structure', () => {
       const incomingData = {
         "createContract": {
           "id": "1",
@@ -286,8 +292,10 @@ describe('QueryBuilder', () => {
       };
       const expectedData = {
         "contract": {
+            "$isPersisted": true,
             "contractOptions": [
               {
+                "$isPersisted": true,
                 "description": "Very foo, much more bar",
                 "id": 1,
                 "name": "Foo Bar 1",
@@ -301,7 +309,9 @@ describe('QueryBuilder', () => {
         };
 
       const model = vuexOrmApollo.context.getModel('contract');
-      expect(queryBuilder.transformIncomingData(incomingData, model, true)).toEqual(expectedData);
+      const transformedData = queryBuilder.transformIncomingData(incomingData, model, true);
+
+      expect(transformedData).toEqual(expectedData);
     });
   });