Use graphiql option variables if query variables are not supplied

CHANGELOG.md

@@ -1,6 +1,8 @@
 # Changelog
 
 ### VNEXT
+* Fix GraphiQL options variables. Issue #193. ([@alanchristensen](https://github.com/alanchristensen)) on
+[PR #255](https://github.com/apollostack/apollo-server/pull/255)
 
 ### v0.5.1
 * add support for HTTP GET Method ([@DxCx](https://github.com/DxCx)) on [#180](https://github.com/apollostack/graphql-server/pull/180)

packages/graphql-server-express/src/expressApollo.ts

@@ -68,13 +68,12 @@ export function graphiqlExpress(options: GraphiQL.GraphiQLData) {
   return (req: express.Request, res: express.Response) => {
     const q = req.url && url.parse(req.url, true).query || {};
     const query = q.query || '';
-    const variables = q.variables || '{}';
     const operationName = q.operationName || '';
 
     const graphiQLString = GraphiQL.renderGraphiQL({
       endpointURL: options.endpointURL,
       query: query || options.query,
-      variables: JSON.parse(variables) || options.variables,
+      variables: q.variables && JSON.parse(q.variables) || options.variables,
       operationName: operationName || options.operationName,
       passHeader: options.passHeader,
     });

packages/graphql-server-hapi/src/hapiApollo.test.ts

@@ -24,9 +24,7 @@ function createApp(options: CreateAppOptions) {
       register: graphiqlHapi,
       options: {
         path: '/graphiql',
-        graphiqlOptions: {
+        graphiqlOptions: (options && options.graphiqlOptions) || { endpointURL: '/graphql' },
-          endpointURL: '/graphql',
-        },
       },
   });
 

packages/graphql-server-hapi/src/hapiApollo.ts

@@ -112,7 +112,7 @@ graphiqlHapi.attributes = {
 function getGraphiQLParams(request, reply) {
   const q = request.query || {};
   const query = q.query || '';
-  const variables = q.variables || '{}';
+  const variables = q.variables;
   const operationName = q.operationName || '';
   reply({ query, variables, operationName});
 }
@@ -122,7 +122,7 @@ function renderGraphiQL(route, graphiqlParams: any, reply) {
   const graphiQLString = GraphiQL.renderGraphiQL({
     endpointURL: graphiqlOptions.endpointURL,
     query: graphiqlParams.query || graphiqlOptions.query,
-    variables: JSON.parse(graphiqlParams.variables) || graphiqlOptions.variables,
+    variables: graphiqlParams.variables && JSON.parse(graphiqlParams.variables) || graphiqlOptions.variables,
     operationName: graphiqlParams.operationName || graphiqlOptions.operationName,
     passHeader: graphiqlOptions.passHeader,
   });

packages/graphql-server-integration-testsuite/src/index.ts

@@ -693,6 +693,36 @@ export default (createApp: CreateAppFunc, destroyApp?: DestroyAppFunc) => {
               expect(response.text).to.include('graphiql.min.js');
           });
       });
+
+      it('presents options variables', () => {
+        app = createApp({graphiqlOptions: {
+            endpointURL: '/graphql',
+            variables: {key: 'optionsValue'},
+        }});
+
+        const req = request(app)
+            .get('/graphiql')
+            .set('Accept', 'text/html');
+        return req.then((response) => {
+            expect(response.status).to.equal(200);
+            expect(response.text.replace(/\s/g, '')).to.include('variables:"{\\n\\"key\\":\\"optionsValue\\"\\n}"');
+        });
+      });
+
+      it('presents query variables over options variables', () => {
+        app = createApp({graphiqlOptions: {
+            endpointURL: '/graphql',
+            variables: {key: 'optionsValue'},
+        }});
+
+        const req = request(app)
+            .get('/graphiql?variables={"key":"queryValue"}')
+            .set('Accept', 'text/html');
+        return req.then((response) => {
+            expect(response.status).to.equal(200);
+            expect(response.text.replace(/\s/g, '')).to.include('variables:"{\\n\\"key\\":\\"queryValue\\"\\n}"');
+        });
+      });
     });
 
     describe('stored queries', () => {

packages/graphql-server-koa/src/koaApollo.ts

@@ -49,13 +49,12 @@ export function graphiqlKoa(options: GraphiQL.GraphiQLData) {
 
     const q = ctx.request.query || {};
     const query = q.query || '';
-    const variables = q.variables || '{}';
     const operationName = q.operationName || '';
 
     const graphiQLString = GraphiQL.renderGraphiQL({
       endpointURL: options.endpointURL,
       query: query || options.query,
-      variables: JSON.parse(variables) || options.variables,
+      variables: q.variables && JSON.parse(q.variables) || options.variables,
       operationName: operationName || options.operationName,
       passHeader: options.passHeader,
     });