Bugfixes, Refactorings and first integration test

Author: phortx

package.json

@@ -64,10 +64,12 @@
     "babel-preset-stage-2": "^6.24.1",
     "codecov.io": "^0.1.6",
     "expect": "^22.1.0",
+    "fetch-mock": "^6.3.0",
     "fork-ts-checker-webpack-plugin": "^0.3.0",
     "istanbul-instrumenter-loader": "^3.0.0",
     "mocha": "^4.1.0",
     "mocha-webpack": "^1.0.1",
+    "node-fetch": "^2.1.1",
     "nyc": "^11.4.1",
     "rollup": "^0.55.3",
     "rollup-plugin-commonjs": "^8.3.0",

src/vuex-orm-apollo.ts

@@ -103,15 +103,15 @@ export default class VuexORMApollo {
    * @param {any} dispatch
    * @returns {Promise<void>}
    */
-  private async fetch ({ state, dispatch, filter }: ActionParams) {
+  private async fetch ({ state, dispatch }: ActionParams, filter: ActionParams) {
     // When the filter contains an id, we query in singular mode
-    const multiple: boolean = !(filter && filter.get('id'));
+    const multiple: boolean = !(filter && filter['id']);
     const model: Model = this.getModel(state.$name);
     const name: string = `${multiple ? model.pluralName : model.singularName}`;
     const query = this.queryBuilder.buildQuery('query', name, filter, model.singularName);
 
     // Send the request to the GraphQL API
-    const data = await this.apolloRequest(query);
+    const data = await this.apolloRequest(query, filter);
 
     // Insert incoming data into the store
     await this.insertData(data, dispatch);
@@ -196,10 +196,7 @@ export default class VuexORMApollo {
       const query = this.queryBuilder.buildQuery('mutation', mutationName, { id }, model);
 
       // Send GraphQL Mutation
-      await this.apolloClient.mutate({
-        mutation: query,
-        variables: { where: id }
-      });
+      await this.apolloRequest(query, { where: id }, true);
     }
   }
 
@@ -225,27 +222,27 @@ export default class VuexORMApollo {
       if (id) variables['id'] = id;
 
       // Send GraphQL Mutation
-      const response = await this.apolloClient.mutate({
-        mutation: query,
-        variables
-      });
-
-      // Insert incoming data into the store
-      const newData = this.queryBuilder.transformIncomingData(response.data as Data, true);
+      const newData = await this.apolloRequest(query, variables, true);
       return this.updateData(newData, dispatch, data.id);
     }
   }
 
   /**
-   * Sends a query to the GraphQL API via apollo
+   * Sends a request to the GraphQL API via apollo
    * @param query
    * @returns {Promise<Data>}
    */
-  private async apolloRequest (query: any): Promise<Data> {
-    const response = await (this.apolloClient).query({ query });
+  private async apolloRequest (query: any, variables?: Arguments, mutation:boolean = false): Promise<Data> {
+    let response;
+
+    if (mutation) {
+      response = await (this.apolloClient).mutate({ mutation: query, variables });
+    } else {
+      response = await (this.apolloClient).query({ query, variables });
+    }
 
     // Transform incoming data into something useful
-    return this.queryBuilder.transformIncomingData(response.data);
+    return this.queryBuilder.transformIncomingData(response.data as Data, mutation);
   }
 
   /**

test/integration/VuexORMApollo.spec.js

@@ -1,3 +1,82 @@
+import {Model as ORMModel} from "@vuex-orm/core";
+import Vue from 'vue';
+import {createStore, sendWithMockFetch} from "../support/Helpers";
+import fetchMock from 'fetch-mock';
+
+let store;
+
 describe('VuexORMApollo', () => {
+  class User extends ORMModel {
+    static entity = 'users';
+
+    static fields () {
+      return {
+        id: this.attr(null),
+        name: this.attr(null),
+        posts: this.hasMany(Post, 'userId')
+      };
+    }
+  }
+
+  class Post extends ORMModel {
+    static entity = 'posts';
+
+    static fields () {
+      return {
+        id: this.attr(null),
+        title: this.attr(null),
+        content: this.attr(null),
+        userId: this.attr(null),
+        user: this.belongsTo(User, 'userId')
+      };
+    }
+  }
+
+  beforeEach(() => {
+    store = createStore([{ model: User }, { model: Post }]);
+    store.dispatch('entities/users/insert', { data: { id: 1, name: 'Johnny Imba' }});
+    store.dispatch('entities/posts/insert', { data: { id: 1, title: 'Example Post 1', content: 'Foo', userId: 1 }});
+    store.dispatch('entities/posts/insert', { data: { id: 2, title: 'Example Post 2', content: 'Bar', userId: 1 }});
+  });
+
+  describe('fetch', () => {
+    describe('with ID', () => {
+      it('sends the correct query to the API', 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'
+                  }
+                ]
+              }
+            }
+          }
+        };
+
+        const request = await sendWithMockFetch(response, async () => {
+          await store.dispatch('entities/users/fetch', { id: 1 });
+        });
 
+        expect(request.variables).toEqual({ id: 1 });
+      });
+    })
+  });
 });

test/support/Helpers.js

@@ -2,23 +2,59 @@ import _ from 'lodash';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import VuexORM, { Database, Model } from '@vuex-orm/core';
-// import installVuexORMApollo from 'app';
+import installVuexORMApollo from 'app';
+import fetchMock from 'fetch-mock';
 
 Vue.use(Vuex);
 
+let fetchMockSetupDone = false;
+
 /**
  * Create a new Vuex Store.
  */
 export function createStore (entities) {
   const database = new Database();
 
+  if (!fetchMockSetupDone) {
+    fetchMock.get('*', {});
+    fetchMockSetupDone = true;
+  }
+
   _.forEach(entities, (entity) => {
     database.register(entity.model, entity.module || {})
   });
 
-  // VuexORM.use(installVuexORMApollo, { database: database });
+  VuexORM.use(installVuexORMApollo, { database: database });
 
   return new Vuex.Store({
     plugins: [VuexORM.install(database)]
   });
 }
+
+
+
+export async function sendWithMockFetch(response, callback) {
+  fetchMock.post('/graphql', response);
+
+  try {
+    await callback();
+  } catch (error) {
+    console.error("An error occured:");
+    console.error(error);
+    throw new Error("Request failed!");
+  }
+
+  const request = fetchMock.lastCall();
+  fetchMock.restore();
+
+  /*
+    Generates
+
+    {
+      operationName: "Users",
+      query: "query Users {\n  users {\n    nodes {\n      id\n      name\n      posts {\n        nodes {\n          id\n          title\n          content\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n}\n"
+      variables: {}
+    }
+   */
+  return JSON.parse(request[1].body);
+}

yarn.lock

@@ -1765,6 +1765,13 @@ fast-json-stable-stringify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
 
+fetch-mock@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/fetch-mock/-/fetch-mock-6.3.0.tgz#4fcf710e49e6202c951d0d7ba8d4a862b6321cef"
+  dependencies:
+    glob-to-regexp "^0.4.0"
+    path-to-regexp "^2.1.0"
+
 filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
@@ -1957,6 +1964,10 @@ glob-parent@^2.0.0:
   dependencies:
     is-glob "^2.0.0"
 
+glob-to-regexp@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.0.tgz#49bd677b1671022bd10921c3788f23cdebf9c7e6"
+
 glob@7.1.2, glob@^7.0.3, glob@^7.0.5, glob@^7.0.6, glob@^7.1.1:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
@@ -2914,6 +2925,10 @@ nise@^1.2.0:
     path-to-regexp "^1.7.0"
     text-encoding "^0.6.4"
 
+node-fetch@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.1.1.tgz#369ca70b82f50c86496104a6c776d274f4e4a2d4"
+
 node-libs-browser@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.1.0.tgz#5f94263d404f6e44767d726901fff05478d600df"
@@ -3219,6 +3234,10 @@ path-to-regexp@^1.7.0:
   dependencies:
     isarray "0.0.1"
 
+path-to-regexp@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.2.0.tgz#80f0ff45c1e0e641da74df313644eaf115050972"
+
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"