Add support for subscription connectionParams in GraphiQL

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### vNEXT
 * Fixes bug where CORS would not allow `Access-Control-Allow-Origin: *` with credential 'include', changed to 'same-origin' [Issue #514](https://github.com/apollographql/apollo-server/issues/514)
 * Update apollo-server-lambda README to reflect new package name.
+* Add support for connectionParams in GraphiQL plugin options [#452](https://github.com/apollographql/apollo-server/issues/452) [PR 548](https://github.com/apollographql/apollo-server/pull/548)
 
 ### v1.1.2
 * Fixed bug with no URL query params with GraphiQL on Lambda [Issue #504](https://github.com/apollographql/apollo-server/issues/504) [PR #512](https://github.com/apollographql/apollo-server/pull/503)

packages/apollo-server-module-graphiql/package.json

@@ -26,5 +26,6 @@
   "typings": "dist/index.d.ts",
   "typescript": {
     "definition": "dist/index.d.ts"
-  }
+  },
+  "dependencies": {}
 }

packages/apollo-server-module-graphiql/src/renderGraphiQL.ts

@@ -17,6 +17,7 @@
  * - (optional) passHeader: a string that will be added to the header object.
  * For example "'Authorization': localStorage['Meteor.loginToken']" for meteor
  * - (optional) editorTheme: a CodeMirror theme to be applied to the GraphiQL UI
+ * - (optional) websocketConnectionParams: an object to pass to the web socket server
  */
 
 export type GraphiQLData = {
@@ -28,6 +29,7 @@ export type GraphiQLData = {
   result?: Object,
   passHeader?: string,
   editorTheme?: string,
+  websocketConnectionParams?: Object,
 };
 
 // Current latest version of GraphiQL.
@@ -56,6 +58,7 @@ export function renderGraphiQL(data: GraphiQLData): string {
   const passHeader = data.passHeader ? data.passHeader : '';
   const editorTheme = data.editorTheme;
   const usingEditorTheme = !!editorTheme;
+  const websocketConnectionParams = data.websocketConnectionParams || null;
 
   /* eslint-disable max-len */
   return `
@@ -124,7 +127,8 @@ export function renderGraphiQL(data: GraphiQLData): string {
 
     ${usingWs ? `
     var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient('${endpointURLWs}', {
-      reconnect: true
+      reconnect: true${websocketConnectionParams ? `,
+      connectionParams: ${JSON.stringify(websocketConnectionParams)}` : '' }
     });
 
     var graphQLWSFetcher = subscriptionsClient.request.bind(subscriptionsClient);
@@ -200,6 +204,7 @@ export function renderGraphiQL(data: GraphiQLData): string {
         variables: ${safeSerialize(variablesString)},
         operationName: ${safeSerialize(operationName)},
         editorTheme: ${safeSerialize(editorTheme)},
+        websocketConnectionParams: ${safeSerialize(websocketConnectionParams)},
       }),
       document.body
     );

packages/apollo-server-module-graphiql/src/resolveGraphiQLString.ts

@@ -40,6 +40,7 @@ function createGraphiQLData(params: GraphiQLParams, options: GraphiQLData): Grap
     operationName: params.operationName || options.operationName,
     passHeader: options.passHeader,
     editorTheme: options.editorTheme,
+    websocketConnectionParams: options.websocketConnectionParams,
   };
 }