implement $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
 

src/context.ts

@@ -59,13 +59,19 @@ export default class Context {
       const model: Model = new Model(entity.model as ORMModel, this);
       this.models.set(model.singularName, model);
 
-      this.addFields(model);
+      this.augmentModel(model);
     });
   }
 
+  private augmentModel (model: Model) {
+    const originalFieldGenerator = model.baseModel.fields.bind(model.baseModel);
 
-  private addFields(model: Model) {
-    // FIXME model.baseModel.fields.push('$isDirty');
-    // FIXME model.baseModel.fields.push('$isPersisted');
+    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

@@ -377,15 +377,15 @@ mutation SignupUser($user: UserInput!, $captchaToken: String!) {
 
   describe('$isDirty', () => {
     it('is false for newly created records', async () => {
-      let user = store.dispatch('entities/users/create', { name: 'Snoopy' });
+      let user = await store.dispatch('entities/users/insert', { data: { name: 'Snoopy' }} );
       expect(user.$isDirty).toBeFalsy();
 
       user = store.getters['entities/users/find'](user.id);
       expect(user.$isDirty).toBeFalsy();
     });
 
     it('is true for changed but unsaved records', async () => {
-      let user = store.dispatch('entities/users/create', { name: 'Snoopy' });
+      let user = await store.dispatch('entities/users/insert', { data: { name: 'Snoopy' }} );
       user.name = 'Snoop Dog';
       expect(user.$isDirty).toBeTruthy();
 
@@ -394,7 +394,7 @@ mutation SignupUser($user: UserInput!, $captchaToken: String!) {
     });
 
     it('is false for changed and saved records', async () => {
-      let user = store.dispatch('entities/users/create', { name: 'Snoopy' });
+      let user = await store.dispatch('entities/users/insert', { data: { name: 'Snoopy' }} );
       user.name = 'Snoop Dog';
       store.dispatch('entities/users/update', { where: user.id, data: user });
       expect(user.$isDirty).toBeFalsy();
@@ -406,7 +406,7 @@ mutation SignupUser($user: UserInput!, $captchaToken: String!) {
 
   describe('$isPersisted', () => {
     it('is false for newly created records', async () => {
-      let user = store.dispatch('entities/users/create', { name: 'Snoopy' });
+      let user = await store.dispatch('entities/users/insert', { data: { name: 'Snoopy' }} );
       expect(user.$isPersisted).toBeFalsy();
 
       user = store.getters['entities/users/find'](user.id);

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);
     });
   });