Finishing persist method

Author: phortx

dist/vuex-orm-apollo.esm.js

@@ -43,7 +43,7 @@
     "@types/graphql": "^0.12.3",
     "@types/inflection": "^1.5.28",
     "@types/lodash-es": "^4.17.0",
-    "@vuex-orm/core": "^0.17.0",
+    "@vuex-orm/core": "^0.19.0",
     "apollo-cache-inmemory": "^1.1.7",
     "apollo-client": "^2.2.2",
     "apollo-link": "^1.0.7",

package.json

@@ -1,13 +1,16 @@
 import Model from './model';
 
+export type DispatchFunction = (action: string, data: Data) => Promise<any>;
+
 export interface ActionParams {
   commit: any;
-  dispatch: any;
+  dispatch: DispatchFunction;
   getters: any;
   rootGetters: any;
   rootState: any;
   state: any;
   filter?: Filter;
+  id?: number;
   data?: Data;
 }
 

src/interfaces.ts

@@ -30,9 +30,9 @@ export default class Model {
     const fields: Array<string> = [];
 
     this.fields.forEach((field: Field, name: string) => {
-      // field.constructor.name is one of Attr, BelongsToMany, BelongsTo, HasMany, HasManyBy, HasOne
+      // field.constructor.name is one of Increment, Attr, BelongsToMany, BelongsTo, HasMany, HasManyBy, HasOne
       // TODO import the classes from Vuex-ORM and use instanceof instead
-      if (field.constructor.name === 'Attr' && !name.endsWith('Id')) {
+      if (this.fieldIsAttribute(field) && !name.endsWith('Id')) {
         fields.push(name);
       }
     });
@@ -47,11 +47,15 @@ export default class Model {
     const relations = new Map<string, Field>();
 
     this.fields.forEach((field: Field, name: string) => {
-      if (field.constructor.name !== 'Attr') {
+      if (!this.fieldIsAttribute(field)) {
         relations.set(name, field);
       }
     });
 
     return relations;
   }
+
+  private fieldIsAttribute (field: Field): boolean {
+    return field.constructor.name === 'Attr' || field.constructor.name === 'Increment';
+  }
 }

src/model.ts

@@ -4,7 +4,7 @@ import { Arguments, Data, Field } from './interfaces';
 import Model from './model';
 import gql from 'graphql-tag';
 import Logger from './logger';
-import { capitalizeFirstLetter } from './utils';
+import { downcaseFirstLetter, upcaseFirstLetter } from './utils';
 const inflection = require('inflection');
 
 /**
@@ -60,8 +60,9 @@ export default class QueryBuilder {
    * @returns {String}
    */
   public buildArguments (args: Arguments | undefined,
-                        signature: boolean = false,
-                        valuesAsVariables: boolean = false): string {
+                         signature: boolean = false,
+                         valuesAsVariables: boolean = false,
+                         allowIdFields: boolean = false): string {
     let returnValue: string = '';
     let first: boolean = true;
 
@@ -70,13 +71,16 @@ export default class QueryBuilder {
         let value: any = args[key];
 
         // Ignore ids and connections
-        if (!(value instanceof Array || key === 'id')) {
+        if (!(value instanceof Array || (key === 'id' && !allowIdFields))) {
           let typeOrValue: any = '';
 
           if (signature) {
             if (typeof value === 'object' && value.__type) {
               // Case 2 (User!)
               typeOrValue = value.__type + 'Input!';
+            } else if (key === 'id') {
+              // Case 1 (ID!)
+              typeOrValue = 'ID!';
             } else {
               // Case 1 (String!)
               typeOrValue = typeof value === 'number' ? 'Number!' : 'String!';
@@ -137,7 +141,7 @@ export default class QueryBuilder {
    * @param {boolean} recursiveCall
    * @returns {Data}
    */
-  public transformIncomingData (data: Data | Array<Data>, recursiveCall: boolean = false): Data {
+  public transformIncomingData (data: Data | Array<Data>, mutationResult: boolean = false, recursiveCall: boolean = false): Data {
     let result: Data = {};
 
     if (!recursiveCall) {
@@ -146,15 +150,22 @@ export default class QueryBuilder {
     }
 
     if (data instanceof Array) {
-      result = data.map(d => this.transformIncomingData(d, true));
+      result = data.map(d => this.transformIncomingData(d, mutationResult, true));
     } else {
       Object.keys(data).forEach((key) => {
         if (data[key]) {
           if (data[key] instanceof Object) {
             if (data[key].nodes) {
-              result[inflection.pluralize(key)] = this.transformIncomingData(data[key].nodes, true);
+              result[inflection.pluralize(key)] = this.transformIncomingData(data[key].nodes, mutationResult, true);
             } else {
-              result[inflection.singularize(key)] = this.transformIncomingData(data[key], true);
+              let newKey = key;
+
+              if (mutationResult) {
+                newKey = newKey.replace(/^(create|update)(.+)/, '$2');
+                newKey = downcaseFirstLetter(newKey);
+              }
+
+              result[inflection.singularize(newKey)] = this.transformIncomingData(data[key], mutationResult, true);
             }
           } else if (key === 'id') {
             result[key] = parseInt(data[key], 0);
@@ -183,7 +194,7 @@ export default class QueryBuilder {
     const relationQueries: Array<string> = [];
 
     model.getRelations().forEach((field: Field, name: string) => {
-      if (!rootModel || name !== rootModel.singularName && name !== rootModel.pluralName) {
+      if (!rootModel || (name !== rootModel.singularName && name !== rootModel.pluralName)) {
         const multiple: boolean = field.constructor.name !== 'BelongsTo';
         relationQueries.push(this.buildField(name, multiple, undefined, false, rootModel || model));
       }
@@ -202,10 +213,16 @@ export default class QueryBuilder {
    * @param {string} name
    * @returns {string}
    */
-  public buildField (model: Model | string, multiple: boolean = true, args?: Arguments, withVars: boolean = false, rootModel?: Model, name?: string): string {
+  public buildField (model: Model | string,
+                     multiple: boolean = true,
+                     args?: Arguments,
+                     withVars: boolean = false,
+                     rootModel?: Model,
+                     name?: string,
+                     allowIdFields: boolean = false): string {
     model = this.getModel(model);
 
-    let params: string = this.buildArguments(args, false, withVars);
+    let params: string = this.buildArguments(args, false, withVars, allowIdFields);
 
     const fields = `
       ${model.getQueryFields().join(' ')}
@@ -251,21 +268,20 @@ export default class QueryBuilder {
    * @param {Model} model
    * @param {string}prefix
    * @returns {any}
+   *
+   * TODO: Refactor to avoid prefix param
    */
-  public buildMutation (model: Model, prefix: string = 'create') {
-    const name = `${prefix}${capitalizeFirstLetter(model.singularName)}`;
-
-    // Send the request to the GraphQL API
-    const signature = this.buildArguments({ contract: { __type: 'Contract' } }, true);
-
-    const field = this.buildField(
-      model,
-      false,
-      { contract: { __type: 'Contract' } },
-      true,
-      undefined,
-      name
-    );
+  public buildMutation (model: Model, id?: number, prefix: string = 'create') {
+    const name: string = `${prefix}${upcaseFirstLetter(model.singularName)}`;
+    let args: Data = { [model.singularName]: { __type: upcaseFirstLetter(model.singularName) } };
+
+    if (prefix === 'delete') {
+      if (!id) throw new Error('No ID given.');
+      args = { id };
+    }
+
+    const signature: string = this.buildArguments(args, true, false, true);
+    const field = this.buildField(model, false, args, true, model, name, true);
 
     const query = `
         mutation ${name}${signature} {

src/queryBuilder.ts

@@ -4,6 +4,16 @@
  * @param {string} input
  * @returns {string}
  */
-export function capitalizeFirstLetter (input: string) {
+export function upcaseFirstLetter (input: string) {
   return input.charAt(0).toUpperCase() + input.slice(1);
 }
+
+/**
+ * Down cases the first letter of the given string.
+ *
+ * @param {string} input
+ * @returns {string}
+ */
+export function downcaseFirstLetter (input: string) {
+  return input.charAt(0).toLowerCase() + input.slice(1);
+}

src/utils.ts

@@ -2,11 +2,9 @@ import Model from './model';
 import { ApolloClient } from 'apollo-client';
 import { HttpLink } from 'apollo-link-http';
 import { InMemoryCache } from 'apollo-cache-inmemory';
-import gql from 'graphql-tag';
-import { Data, ActionParams, Arguments, ORMModel } from './interfaces';
+import { Data, ActionParams, Arguments, ORMModel, DispatchFunction } from './interfaces';
 import Logger from './logger';
 import QueryBuilder from './queryBuilder';
-import { capitalizeFirstLetter } from './utils';
 
 const inflection = require('inflection');
 
@@ -91,7 +89,7 @@ export default class VuexORMApollo {
 
     this.components.subActions.persist = this.persist.bind(this);
     this.components.subActions.push = this.push.bind(this);
-    // this.components.subActions.destroy = this.destroy.bind(this);
+    this.components.subActions.destroy = this.destroy.bind(this);
     // this.components.subActions.destroyAll = this.destroyAll.bind(this);
   }
 
@@ -109,7 +107,7 @@ export default class VuexORMApollo {
     const data = await this.apolloRequest(query);
 
     // Insert incoming data into the store
-    this.storeData(data, dispatch);
+    await this.insertData(data, dispatch);
   }
 
   /**
@@ -120,8 +118,14 @@ export default class VuexORMApollo {
    * @param {any} id
    * @returns {Promise<void>}
    */
-  private async persist ({ state, dispatch }: ActionParams, { data }: ActionParams) {
-    return this.mutate('create', data, dispatch, this.getModel(state.$name));
+  private async persist ({ state, dispatch }: ActionParams, { id }: ActionParams) {
+    const model = this.getModel(state.$name);
+    const data = model.baseModel.getters('find')(id);
+
+    await this.mutate('create', data, dispatch, this.getModel(state.$name));
+
+    // TODO is this really necessary?
+    return model.baseModel.getters('find')(id);
   }
 
   /**
@@ -135,6 +139,28 @@ export default class VuexORMApollo {
     return this.mutate('update', data, dispatch, this.getModel(state.$name));
   }
 
+  /**
+   * Will be called, when dispatch('entities/something/destroy') is called.
+   *
+   * @param {any} state
+   * @param {any} dispatch
+   * @param {Data} id
+   * @returns {Promise<void>}
+   */
+  private async destroy ({ state, dispatch }: ActionParams, { id }: ActionParams): Promise<void> {
+    const model = this.getModel(state.$name);
+
+    if (id) {
+      const query = this.queryBuilder.buildMutation(model, id, 'delete');
+
+      // Send GraphQL Mutation
+      await this.apolloClient.mutate({
+        mutation: query,
+        variables: { id }
+      });
+    }
+  }
+
   /**
    * Contains the logic to save (persist or push) data.
    *
@@ -144,30 +170,27 @@ export default class VuexORMApollo {
    * @param {Model} model
    * @returns {Promise<any>}
    */
-  private async mutate (action: string, data: Data | undefined, dispatch: Function, model: Model) {
+  private async mutate (action: string, data: Data | undefined, dispatch: DispatchFunction, model: Model): Promise<any> {
     if (data) {
-      const query = this.queryBuilder.buildMutation(model, action);
+      const id = action === 'create' ? undefined : data.id;
+      const query = this.queryBuilder.buildMutation(model, id, action);
+
+      const variables: Data = {
+        [model.singularName]: this.queryBuilder.transformOutgoingData(data)
+      };
+
+      if (id) variables['id'] = id;
 
       // Send GraphQL Mutation
       const response = await this.apolloClient.mutate({
-        'mutation': query,
-        'variables': {
-          [model.singularName]: this.queryBuilder.transformOutgoingData(data)
-        }
+        mutation: query,
+        variables
       });
 
-      // Remove the original data
-      // FIXME how? https://github.com/vuex-orm/vuex-orm/issues/78
-      // model.baseModel.dispatch('delete', { id });
-
       // Insert incoming data into the store
-      const newData = this.queryBuilder.transformIncomingData(response.data as Data);
-      this.storeData(newData, dispatch);
-
-      return newData;
+      const newData = this.queryBuilder.transformIncomingData(response.data as Data, true);
+      return this.updateData(newData, dispatch, data.id);
     }
-
-    return {};
   }
 
   /**
@@ -183,14 +206,33 @@ export default class VuexORMApollo {
   }
 
   /**
-   * Saves incoming data into the store.
+   * Inserts incoming data into the store.
    *
    * @param {Data} data
    * @param {Function} dispatch
+   * @param {boolean} update
    */
-  private storeData (data: Data, dispatch: Function) {
-    Object.keys(data).forEach((key) => {
-      dispatch('insert', { data: data[key] });
+  private async insertData (data: Data, dispatch: DispatchFunction) {
+    Object.keys(data).forEach(async (key) => {
+      await dispatch('insertOrUpdate', { data: data[key] });
     });
   }
+
+  /**
+   * Updates an existing record in the store with new data. This method can only update one single record, so
+   * it takes the first record of the first field from the data object!
+   * @param {Data} data
+   * @param {Function} dispatch
+   * @param id
+   */
+  private async updateData (data: Data, dispatch: DispatchFunction, id: number | string) {
+    // We only take the first field!
+    data = data[Object.keys(data)[0]];
+
+    if (data instanceof Array) {
+      data = data[0];
+    }
+
+    return dispatch('update', { where: id, data });
+  }
 }