Dynamic headers (#54)

Author: phortx

dist/vuex-orm-graphql.esm.js

@@ -27070,7 +27070,6 @@ var Apollo = /** @class */ (function () {
             this.httpLink = new HttpLink({
                 uri: context.options.url ? context.options.url : '/graphql',
                 credentials: context.options.credentials ? context.options.credentials : 'same-origin',
-                headers: context.options.headers ? context.options.headers : {},
                 useGETForQueries: Boolean(context.options.useGETForQueries)
             });
         }
@@ -27093,18 +27092,19 @@ var Apollo = /** @class */ (function () {
         if (mutation === void 0) { mutation = false; }
         if (bypassCache === void 0) { bypassCache = false; }
         return __awaiter$1(this, void 0, void 0, function () {
-            var fetchPolicy, response;
+            var fetchPolicy, context, response;
             return __generator$1(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         fetchPolicy = bypassCache ? 'network-only' : 'cache-first';
                         Context.getInstance().logger.logQuery(query, variables, fetchPolicy);
+                        context = { headers: Apollo.getHeaders() };
                         if (!mutation) return [3 /*break*/, 2];
-                        return [4 /*yield*/, this.apolloClient.mutate({ mutation: query, variables: variables })];
+                        return [4 /*yield*/, this.apolloClient.mutate({ mutation: query, variables: variables, context: context })];
                     case 1:
                         response = _a.sent();
                         return [3 /*break*/, 4];
-                    case 2: return [4 /*yield*/, this.apolloClient.query({ query: query, variables: variables, fetchPolicy: fetchPolicy })];
+                    case 2: return [4 /*yield*/, this.apolloClient.query({ query: query, variables: variables, fetchPolicy: fetchPolicy, context: context })];
                     case 3:
                         response = _a.sent();
                         _a.label = 4;
@@ -27121,17 +27121,25 @@ var Apollo = /** @class */ (function () {
             var fetchPolicy;
             return __generator$1(this, function (_a) {
                 fetchPolicy = bypassCache ? 'network-only' : 'cache-first';
-                return [2 /*return*/, this.apolloClient.query({ query: src(query), variables: variables, fetchPolicy: fetchPolicy, context: context })];
+                return [2 /*return*/, this.apolloClient.query({ query: src(query), variables: variables, fetchPolicy: fetchPolicy, context: { headers: Apollo.getHeaders() } })];
             });
         });
     };
     Apollo.prototype.simpleMutation = function (query, variables, context) {
         return __awaiter$1(this, void 0, void 0, function () {
             return __generator$1(this, function (_a) {
-                return [2 /*return*/, this.apolloClient.mutate({ mutation: src(query), variables: variables, context: context })];
+                return [2 /*return*/, this.apolloClient.mutate({ mutation: src(query), variables: variables, context: { headers: Apollo.getHeaders() } })];
             });
         });
     };
+    Apollo.getHeaders = function () {
+        var context = Context.getInstance();
+        var headers = context.options.headers ? context.options.headers : {};
+        if (headers instanceof Function) {
+            headers = headers(context);
+        }
+        return headers;
+    };
     return Apollo;
 }());
 

docs/guide/setup/README.md

@@ -32,7 +32,9 @@ These are the possible options to pass when calling `VuexORM.use()`:
 - `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.
-- `headers` (optional, default: `{}`) HTTP Headers. See [apollo-link-http])(https://github.com/apollographql/apollo-link/tree/master/packages/apollo-link-http#options)
+- `headers` (optional, default: `{}`) HTTP Headers. See
+  [apollo-link-http])(https://github.com/apollographql/apollo-link/tree/master/packages/apollo-link-http#options).
+  This can be a static object or a function, returning a object, which will be called before a request is made.
 - `credentials` (optional, default: `same-origin`) Credentials Policy. See [apollo-link-http])(https://github.com/apollographql/apollo-link/tree/master/packages/apollo-link-http#options)
 - `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)
 - `connectionQueryMode` (optional, default: `auto`). One of `auto | nodes | edges | plain`. See [Connection Mode](/guide/connection-mode)

src/graphql/apollo.ts

@@ -37,7 +37,6 @@ export default class Apollo {
       this.httpLink = new HttpLink({
         uri: context.options.url ? context.options.url : '/graphql',
         credentials: context.options.credentials ? context.options.credentials : 'same-origin',
-        headers: context.options.headers ? context.options.headers : {},
         useGETForQueries: Boolean(context.options.useGETForQueries)
       });
     }
@@ -64,11 +63,13 @@ export default class Apollo {
     const fetchPolicy: FetchPolicy = bypassCache ? 'network-only' : 'cache-first';
     Context.getInstance().logger.logQuery(query, variables, fetchPolicy);
 
+    const context = { headers: Apollo.getHeaders() };
+
     let response;
     if (mutation) {
-      response = await this.apolloClient.mutate({ mutation: query, variables });
+      response = await this.apolloClient.mutate({ mutation: query, variables, context });
     } else {
-      response = await this.apolloClient.query({ query, variables, fetchPolicy });
+      response = await this.apolloClient.query({ query, variables, fetchPolicy, context });
     }
 
     // Transform incoming data into something useful
@@ -77,10 +78,22 @@ export default class Apollo {
 
   public async simpleQuery (query: string, variables: Arguments, bypassCache: boolean = false, context?: Data): Promise<any> {
     const fetchPolicy: FetchPolicy = bypassCache ? 'network-only' : 'cache-first';
-    return this.apolloClient.query({ query: gql(query), variables, fetchPolicy, context });
+    return this.apolloClient.query({ query: gql(query), variables, fetchPolicy, context: { headers: Apollo.getHeaders() } });
   }
 
   public async simpleMutation (query: string, variables: Arguments, context?: Data): Promise<any> {
-    return this.apolloClient.mutate({ mutation: gql(query), variables, context });
+    return this.apolloClient.mutate({ mutation: gql(query), variables, context: { headers: Apollo.getHeaders() } });
+  }
+
+  private static getHeaders () {
+    const context = Context.getInstance();
+
+    let headers: Object | Function = context.options.headers ? context.options.headers : {};
+
+    if (headers instanceof Function) {
+      headers = headers(context);
+    }
+
+    return headers;
   }
 }