Merge pull request #320 from Urigo/feat/subscriptions-graphiql

Add support for subscriptions in GraphiQL
apollographql · Mar 30, 2017 · 9477f01 · 9477f01
2 parents 4c1e4f1 + f7e2fb0
commit 9477f01
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ### VNEXT
 
+* Restify: Fix for calling next() (([@jadkap](https://github.com/jadkap)) on [#285](https://github.com/apollostack/graphql-server/pull/285))
+* Add AWS Lambda Integration [#101](https://github.com/apollostack/graphql-server/issues/101)
 * Restify: Fix for calling next() ([@jadkap](https://github.com/jadkap)) on [#285](https://github.com/apollostack/graphql-server/pull/285)
 * Update GraphiQL to version 0.9.1 ([@ephemer](https://github.com/ephemer)) on [#293](https://github.com/apollostack/graphql-server/pull/293)
 * Add AWS Lambda Integration [#101](https://github.com/apollostack/graphql-server/issues/101)

diff --git a/packages/graphql-server-express/src/expressApollo.ts b/packages/graphql-server-express/src/expressApollo.ts
@@ -72,6 +72,7 @@ export function graphiqlExpress(options: GraphiQL.GraphiQLData) {
 
     const graphiQLString = GraphiQL.renderGraphiQL({
       endpointURL: options.endpointURL,
+      subscriptionsEndpoint: options.subscriptionsEndpoint,
       query: query || options.query,
       variables: q.variables && JSON.parse(q.variables) || options.variables,
       operationName: operationName || options.operationName,

diff --git a/packages/graphql-server-hapi/src/hapiApollo.ts b/packages/graphql-server-hapi/src/hapiApollo.ts
@@ -121,6 +121,7 @@ function renderGraphiQL(route, graphiqlParams: any, reply) {
   const graphiqlOptions = route.settings.plugins['graphiql'];
   const graphiQLString = GraphiQL.renderGraphiQL({
     endpointURL: graphiqlOptions.endpointURL,
+    subscriptionsEndpoint: graphiqlOptions.subscriptionsEndpoint,
     query: graphiqlParams.query || graphiqlOptions.query,
     variables: graphiqlParams.variables && JSON.parse(graphiqlParams.variables) || graphiqlOptions.variables,
     operationName: graphiqlParams.operationName || graphiqlOptions.operationName,

diff --git a/packages/graphql-server-koa/src/koaApollo.ts b/packages/graphql-server-koa/src/koaApollo.ts
@@ -53,6 +53,7 @@ export function graphiqlKoa(options: GraphiQL.GraphiQLData) {
 
     const graphiQLString = GraphiQL.renderGraphiQL({
       endpointURL: options.endpointURL,
+      subscriptionsEndpoint: options.subscriptionsEndpoint,
       query: query || options.query,
       variables: q.variables && JSON.parse(q.variables) || options.variables,
       operationName: operationName || options.operationName,

diff --git a/packages/graphql-server-lambda/src/lambdaApollo.ts b/packages/graphql-server-lambda/src/lambdaApollo.ts
@@ -87,6 +87,7 @@ export function graphiqlLambda(options: GraphiQL.GraphiQLData) {
 
     const graphiQLString = GraphiQL.renderGraphiQL({
       endpointURL: options.endpointURL,
+      subscriptionsEndpoint: options.subscriptionsEndpoint,
       query: query || options.query,
       variables: q.variables && JSON.parse(variables) || options.variables,
       operationName: operationName || options.operationName,

diff --git a/packages/graphql-server-module-graphiql/src/renderGraphiQL.ts b/packages/graphql-server-module-graphiql/src/renderGraphiQL.ts
@@ -20,6 +20,7 @@
 
 export type GraphiQLData = {
   endpointURL: string,
+  subscriptionsEndpoint?: string,
   query?: string,
   variables?: Object,
   operationName?: string,
@@ -38,6 +39,8 @@ function safeSerialize(data) {
 
 export function renderGraphiQL(data: GraphiQLData): string {
   const endpointURL = data.endpointURL;
+  const subscriptionsEndpoint = data.subscriptionsEndpoint;
+  const usingSubscriptions = !!subscriptionsEndpoint;
   const queryString = data.query;
   const variablesString =
     data.variables ? JSON.stringify(data.variables, null, 2) : null;
@@ -66,6 +69,10 @@ export function renderGraphiQL(data: GraphiQLData): string {
   <script src="//cdn.jsdelivr.net/react/15.0.0/react.min.js"></script>
   <script src="//cdn.jsdelivr.net/react/15.0.0/react-dom.min.js"></script>
   <script src="//cdn.jsdelivr.net/graphiql/${GRAPHIQL_VERSION}/graphiql.min.js"></script>
+  ${usingSubscriptions ?
+    '<script src="//unpkg.com/subscriptions-transport-ws@0.5.4/browser/client.js"></script>' +
+    '<script src="//unpkg.com/graphiql-subscriptions-fetcher@0.0.2/browser/client.js"></script>'
+    : ''}
 </head>
 <body>
   <script>
@@ -97,28 +104,40 @@ export function renderGraphiQL(data: GraphiQLData): string {
         otherParams[k] = parameters[k];
       }
     }
+
+    var fetcher;
+
+    if (${usingSubscriptions}) {
+      var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient('${subscriptionsEndpoint}', {
+        reconnect: true
+      });
+      fetcher = window.GraphiQLSubscriptionsFetcher.graphQLFetcher(subscriptionsClient, graphQLFetcher);
+    } else {
+      fetcher = graphQLFetcher;
+    }
+
     // 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',
-          ${passHeader}
-        },
-        body: JSON.stringify(graphQLParams),
-        credentials: 'include',
-      }).then(function (response) {
-        return response.text();
-      }).then(function (responseBody) {
-        try {
-          return JSON.parse(responseBody);
-        } catch (error) {
-          return responseBody;
-        }
-      });
+        return fetch('/graphql', {
+          method: 'post',
+          headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(graphQLParams),
+          credentials: 'include',
+        }).then(function (response) {
+          return response.text();
+        }).then(function (responseBody) {
+          try {
+            return JSON.parse(responseBody);
+          } catch (error) {
+            return responseBody;
+          }
+        });
     }
     // When the query and variables string is edited, update the URL bar so
     // that it can be easily shared.
@@ -140,7 +159,7 @@ export function renderGraphiQL(data: GraphiQLData): string {
     // Render <GraphiQL /> into the body.
     ReactDOM.render(
       React.createElement(GraphiQL, {
-        fetcher: graphQLFetcher,
+        fetcher: fetcher,
         onEditQuery: onEditQuery,
         onEditVariables: onEditVariables,
         onEditOperationName: onEditOperationName,

diff --git a/packages/graphql-server-restify/src/restifyApollo.ts b/packages/graphql-server-restify/src/restifyApollo.ts
@@ -73,6 +73,7 @@ export function graphiqlRestify(options: GraphiQL.GraphiQLData) {
 
     const graphiQLString = GraphiQL.renderGraphiQL({
       endpointURL: options.endpointURL,
+      subscriptionsEndpoint: options.subscriptionsEndpoint,
       query: query || options.query,
       variables: q.variables && JSON.parse(q.variables) || options.variables,
       operationName: operationName || options.operationName,