Pass custom header in GraphiQL (#133)

* Pass meteor login token in Authorization header

* Use passHeader method

* update changelog

* Fix lint rules

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### VNEXT
+
+* Allow to pass custom headers in GraphiQL ([@nicolaslopezj](https://github.com/nicolaslopezj) in [#133](https://github.com/apollostack/apollo-server/pull/133)).
+
 ### v0.3.0
 * Refactor Hapi integration to improve the API and make the plugins more idiomatic. ([@nnance](https://github.com/nnance)) in
 [PR #127](https://github.com/apollostack/apollo-server/pull/127)

src/integrations/expressApollo.ts

@@ -155,6 +155,7 @@ export function graphiqlExpress(options: GraphiQL.GraphiQLData) {
       query: query || options.query,
       variables: JSON.parse(variables) || options.variables,
       operationName: operationName || options.operationName,
+      passHeader: options.passHeader,
     });
     res.setHeader('Content-Type', 'text/html');
     res.write(graphiQLString);

src/modules/renderGraphiQL.ts

@@ -15,6 +15,8 @@
  * - (optional) variables: a JS object of variables to pre-fill in the GraphiQL UI
  * - (optional) operationName: the operationName to pre-fill in the GraphiQL UI
  * - (optional) result: the result of the query to pre-fill in the GraphiQL UI
+ * - (optional) passHeader: a string that will be added to the header object.
+ * For example "'Authorization': localStorage['Meteor.loginToken']" for meteor
  */
 
 export type GraphiQLData = {
@@ -23,6 +25,7 @@ export type GraphiQLData = {
   variables?: Object,
   operationName?: string,
   result?: Object,
+  passHeader?: string
 };
 
 // Current latest version of GraphiQL.
@@ -41,6 +44,7 @@ export function renderGraphiQL(data: GraphiQLData): string {
     data.variables ? JSON.stringify(data.variables, null, 2) : null;
   const resultString = null;
   const operationName = data.operationName;
+  const passHeader = data.passHeader ? data.passHeader : '';
 
   /* eslint-disable max-len */
   return `
@@ -94,15 +98,16 @@ export function renderGraphiQL(data: GraphiQLData): string {
         otherParams[k] = parameters[k];
       }
     }
-    // We don't use safe-serialize for location, becuase it's not client input.
+    // We don't use safe-serialize for location, because it's not client input.
     var fetchURL = locationQuery(otherParams, '${endpointURL}');
     // Defines a GraphQL fetcher using the fetch API.
     function graphQLFetcher(graphQLParams) {
       return fetch(fetchURL, {
         method: 'post',
         headers: {
           'Accept': 'application/json',
-          'Content-Type': 'application/json'
+          'Content-Type': 'application/json',
+          ${passHeader}
         },
         body: JSON.stringify(graphQLParams),
         credentials: 'include',