added apolloClient option for passing a preconfigured client (#93)

* added apolloClient option for passing a preconfigured Apollo client to the plugin.

* dont setup link if apolloClient is used

* setup client via function

* added some guidance on configuring for AppSync

* context hug the apolloClient option

* added test for setting apolloClient

* rebuild project:
#	dist/vuex-orm-graphql.es5.js
#	dist/vuex-orm-graphql.es5.js.map
#	dist/vuex-orm-graphql.umd.js
#	dist/vuex-orm-graphql.umd.js.map

Author: toadkicker

dist/vuex-orm-graphql.es5.js

@@ -28,7 +28,7 @@ VuexORM.use(VuexORMGraphQL, { database });
 ## Possible options
 
 These are the possible options to pass when calling `VuexORM.use()`:
-
+- `apolloClient` (optional): Provide a preconfigured instance of the Apollo client. See [client](#client)
 - `database` (required): The Vuex-ORM database.
 - `debug` (optional, default: `false`): Set to true to activate the debug logging.
 - `url` (optional, default: `/graphql`): The URL to the graphql api. Will be passed to apollo-client.
@@ -39,11 +39,59 @@ These are the possible options to pass when calling `VuexORM.use()`:
 - `useGETForQueries` (optional, default: `false`) Use GET for queries (not for mutations). See [apollo-link-http](https://github.com/apollographql/apollo-link/tree/master/packages/apollo-link-http#options)
 - `adapter` (optional, default: `DefaultAdapter`). See [Adapters](adapters.md)
 
-More options will come in future releases.
-
 ::: tip
 We recommend to activate the debug mode in development env automatically via:
 ```javascript
 { debug: process.env.NODE_ENV !== 'production' }
 ```
 :::
+
+## Client
+
+You can inject your own instance of the Apollo Client using `option.apolloClient`. This is useful if
+the app requires a more complex configuration, such as integration wiht AWS AppSync. When `apolloClient`
+is used, `plugin-graphql` ignores any other options to configure Apollo client.
+
+Here is an example configuration for AWS AppSync:
+
+```
+import VuexORM from '@vuex-orm/core'
+import AWSAppSyncClient from 'aws-appsync'
+import { Auth } from 'aws-amplify'
+import VuexORMGraphQL from '@vuex-orm/plugin-graphql'
+
+import database from '../database'
+import awsexports from '../aws-exports'
+
+const options = {
+  defaultOptions: {
+    watchQuery: {
+      fetchPolicy: 'cache-and-network'
+    }
+  },
+  connectionQueryMode: 'nodes',
+  database: database,
+  url: awsexports.aws_appsync_graphqlEndpoint,
+  includeExtensions: true,
+  debug: process.env.NODE_ENV !== 'production'
+}
+
+const config = {
+  url: awsexports.aws_appsync_graphqlEndpoint,
+  region: awsexports.aws_appsync_region,
+  auth: {
+    type: awsexports.aws_appsync_authenticationType,
+    jwtToken: async () => (await Auth.currentSession()).getIdToken().getJwtToken()
+  }
+}
+
+const client = new AWSAppSyncClient(config, options)
+
+options.apolloClient = client
+
+VuexORM.use(VuexORMGraphQL, options)
+
+export const plugins = [
+  VuexORM.install(database)
+]
+```

dist/vuex-orm-graphql.es5.js.map

@@ -76,6 +76,7 @@
     "commitizen": "^3.0.0",
     "coveralls": "^3.0.2",
     "cross-env": "^5.2.0",
+    "cross-fetch": "^3.0.2",
     "cz-conventional-changelog": "^2.1.0",
     "graphql": "^0.12.3",
     "graphql-tag": "^2.6.1",

dist/vuex-orm-graphql.umd.js

@@ -31,7 +31,7 @@ export default class Apollo {
     const context = Context.getInstance();
 
     // This allows the test suite to pass a custom link
-    if (context.options.link) {
+    if (!context.options.apolloClient && context.options.link) {
       this.httpLink = context.options.link;
     } else {
       /* istanbul ignore next */
@@ -42,11 +42,17 @@ export default class Apollo {
       });
     }
 
-    this.apolloClient = new ApolloClient({
-      link: this.httpLink,
-      cache: new InMemoryCache(),
-      connectToDevTools: context.debugMode
-    });
+    if (context.options.apolloClient) {
+      this.apolloClient = (context => {
+        return context.options.apolloClient;
+      })(context);
+    } else {
+      this.apolloClient = new ApolloClient({
+        link: this.httpLink,
+        cache: new InMemoryCache(),
+        connectToDevTools: context.debugMode
+      });
+    }
   }
 
   /**

dist/vuex-orm-graphql.umd.js.map

@@ -9,6 +9,7 @@ import Adapter from "../adapters/adapter";
 export type DispatchFunction = (action: string, data: Data) => Promise<any>;
 
 export interface Options {
+  apolloClient: any;
   database: Database;
   url?: string;
   headers?: { [index: string]: any };

docs/guide/setup.md

@@ -124,42 +124,42 @@ query User($id: ID!) {
   });
 
   describe("without ID but with filter with array", () => {
-      test("sends the correct query to the API", async () => {
+    test("sends the correct query to the API", async () => {
+      // @ts-ignore
+      await User.fetch(1);
+
+      const insertedData = await Post.insert({
+        data: {
+          title: "It works!",
+          content: "This is a test!",
+          published: false,
+          otherId: 15,
+          author: User.find(1)
+        }
+      });
+
+      const post = insertedData.posts[0];
+
+      const request = await recordGraphQLRequest(async () => {
         // @ts-ignore
-        await User.fetch(1);
+        await User.fetch({ profileId: 2, posts: [post] });
+      });
 
-        const insertedData = await Post.insert({
-          data: {
-            title: "It works!",
+      expect(request!.variables).toEqual({
+        profileId: 2,
+        posts: [
+          {
+            id: 1,
+            authorId: 1,
             content: "This is a test!",
-            published: false,
             otherId: 15,
-            author: User.find(1)
+            published: false,
+            title: "It works!"
           }
-        });
-
-        const post = insertedData.posts[0];
-
-        const request = await recordGraphQLRequest(async () => {
-          // @ts-ignore
-          await User.fetch({ profileId: 2, posts: [post] });
-        });
-
-        expect(request!.variables).toEqual({
-          profileId: 2,
-          posts: [
-            {
-              id: 1,
-              authorId: 1,
-              content: "This is a test!",
-              otherId: 15,
-              published: false,
-              title: "It works!"
-            }
-          ]
-        });
-        expect(request!.query).toEqual(
-          `
+        ]
+      });
+      expect(request!.query).toEqual(
+        `
 query Users($profileId: ID!, $posts: [PostFilter]!) {
   users(filter: {profileId: $profileId, posts: $posts}) {
     nodes {
@@ -175,9 +175,9 @@ query Users($profileId: ID!, $posts: [PostFilter]!) {
   }
 }
           `.trim() + "\n"
-        );
-      });
+      );
     });
+  });
 
   describe("without ID but with filter with object", () => {
     test("sends the correct query to the API", async () => {

package.json

@@ -0,0 +1,36 @@
+import * as fetch from "cross-fetch";
+import { ApolloClient, FetchPolicy } from "apollo-client";
+import { InMemoryCache } from "apollo-cache-inmemory";
+import { HttpLink } from "apollo-link-http";
+import { ApolloLink } from "apollo-link";
+
+export default class MockApolloClient {
+  /**
+   * The http link instance to use.
+   * @type {HttpLink}
+   */
+  private readonly httpLink: ApolloLink;
+  /**
+   * The ApolloClient instance
+   * @type {ApolloClient}
+   */
+  private readonly apolloClient: ApolloClient<any>;
+  /**
+   * @constructor
+   */
+  public constructor() {
+    /* istanbul ignore next */
+    this.httpLink = new HttpLink({
+      ...fetch,
+      uri: "/graphql",
+      credentials: "same-origin",
+      useGETForQueries: false
+    });
+
+    this.apolloClient = new ApolloClient({
+      link: this.httpLink,
+      cache: new InMemoryCache(),
+      connectToDevTools: true
+    });
+  }
+}

src/graphql/apollo.ts

@@ -1,5 +1,6 @@
 import { setupMockData } from "../support/mock-data";
 import Context from "../../src/common/context";
+import MockApolloClient from "../support/mock-apollo-client";
 
 let store;
 let vuexOrmGraphQL;
@@ -17,6 +18,13 @@ describe("Context", () => {
     });
   });
 
+  describe(".apolloClient", () => {
+    test("returns an apollo client", () => {
+      context.options.apolloClient = new MockApolloClient();
+      expect(context.options.apolloClient instanceof MockApolloClient).toBe(true);
+    });
+  });
+
   describe(".getModel", () => {
     test("returns a model", () => {
       expect(context.getModel("post")).toEqual(context.models.get("post"));

src/support/interfaces.ts

@@ -3315,6 +3315,14 @@ cross-env@^5.2.0:
     cross-spawn "^6.0.5"
     is-windows "^1.0.0"
 
+cross-fetch@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.2.tgz#b7136491967031949c7f86b15903aef4fa3f1768"
+  integrity sha512-a4Z0EJ5Nck6QtMy9ZqloLfpvu2uMV3sBfMCR+CgSBCZc6z5KR4bfEiD3dkepH8iZgJMXQpTqf8FjMmvu/GMFkg==
+  dependencies:
+    node-fetch "2.3.0"
+    whatwg-fetch "3.0.0"
+
 cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -7340,7 +7348,7 @@ node-fetch-npm@^2.0.2:
     json-parse-better-errors "^1.0.0"
     safe-buffer "^5.1.1"
 
-node-fetch@^2.1.1, node-fetch@^2.3.0:
+node-fetch@2.3.0, node-fetch@^2.1.1, node-fetch@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.3.0.tgz#1a1d940bbfb916a1d3e0219f037e89e71f8c5fa5"
 
@@ -11138,6 +11146,11 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
   dependencies:
     iconv-lite "0.4.24"
 
+whatwg-fetch@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
+  integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==
+
 whatwg-mimetype@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.2.0.tgz#a3d58ef10b76009b042d03e25591ece89b88d171"