Include operationName in GraphiQL URL

src/__tests__/http-test.js

@@ -1130,6 +1130,31 @@ describe('test harness', () => {
         );
       });
 
+      it('contains a pre-run operation name within GraphiQL', async () => {
+        var app = express();
+
+        app.use(urlString(), graphqlHTTP({
+          schema: TestSchema,
+          graphiql: true
+        }));
+
+        var response = await request(app)
+          .get(urlString({
+            query: 'query A{a:test} query B{b:test}',
+            operationName: 'B'
+          }))
+          .set('Accept', 'text/html');
+
+        expect(response.status).to.equal(200);
+        expect(response.type).to.equal('text/html');
+        expect(response.text).to.include(
+          'response: ' + JSON.stringify(
+            JSON.stringify({ data: { b: 'Hello World' } }, null, 2)
+          )
+        );
+        expect(response.text).to.include('operationName: "B"');
+      });
+
       it('escapes HTML in queries within GraphiQL', async () => {
         var app = express();
 

src/index.js

@@ -206,7 +206,7 @@ export default function graphqlHTTP(options: Options): Middleware {
       if (showGraphiQL) {
         response
           .set('Content-Type', 'text/html')
-          .send(renderGraphiQL({ query, variables, result }));
+          .send(renderGraphiQL({ query, variables, operationName, result }));
       } else {
         // Otherwise, present JSON directly.
         response

src/renderGraphiQL.js

@@ -8,7 +8,12 @@
  *  of patent rights can be found in the PATENTS file in the same directory.
  */
 
-type GraphiQLData = { query: ?string, variables: ?Object, result?: Object };
+type GraphiQLData = {
+  query: ?string,
+  variables: ?Object,
+  operationName: ?string,
+  result?: Object
+};
 
 // Current latest version of GraphiQL.
 const GRAPHIQL_VERSION = '0.6.5';
@@ -31,6 +36,7 @@ export function renderGraphiQL(data: GraphiQLData): string {
     data.variables ? JSON.stringify(data.variables, null, 2) : null;
   const resultString =
     data.result ? JSON.stringify(data.result, null, 2) : null;
+  const operationName = data.operationName;
 
   /* eslint-disable max-len */
   return `<!--
@@ -126,6 +132,11 @@ add "&raw" to the end of the URL within a browser.
       updateURL();
     }
 
+    function onEditOperationName(newOperationName) {
+      parameters.operationName = newOperationName;
+      updateURL();
+    }
+
     function updateURL() {
       history.replaceState(null, null, locationQuery(parameters));
     }
@@ -136,9 +147,11 @@ add "&raw" to the end of the URL within a browser.
         fetcher: graphQLFetcher,
         onEditQuery: onEditQuery,
         onEditVariables: onEditVariables,
+        onEditOperationName: onEditOperationName,
         query: ${safeSerialize(queryString)},
         response: ${safeSerialize(resultString)},
-        variables: ${safeSerialize(variablesString)}
+        variables: ${safeSerialize(variablesString)},
+        operationName: ${safeSerialize(operationName)},
       }),
       document.body
     );