Allow to override GraphiQL default query (graphql#508)

Use a lot of ideas from graphql#507 by @rybon

README.md

@@ -64,9 +64,13 @@ The `graphqlHTTP` function accepts the following options:
     A `schema` *must* be provided.
 
   * **`graphiql`**: If `true`, presents [GraphiQL][] when the GraphQL endpoint is
-    loaded in a browser. We recommend that you set
-    `graphiql` to `true` when your app is in development, because it's
-    quite useful. You may or may not want it in production.
+    loaded in a browser. We recommend that you set `graphiql` to `true` when your
+    app is in development, because it's quite useful. You may or may not want it
+    in production.
+    Alternatively, instead of `true` you can pass in an options object:
+      * **`defaultQuery`**: An optional GraphQL string to use when no query
+        is provided and no stored query exists from a previous session.
+        If undefined is provided, GraphiQL will use its own default query.
 
   * **`rootValue`**: A value to pass as the `rootValue` to the `graphql()`
     function from [`GraphQL.js/src/execute.js`](https://github.com/graphql/graphql-js/blob/master/src/execution/execute.js#L119).

src/__tests__/http-test.js

@@ -1638,6 +1638,29 @@ function urlString(urlParams?: ?{ [param: string]: mixed }) {
         expect(response.text).to.include('graphiql.min.js');
       });
 
+      it('contains a default query within GraphiQL', async () => {
+        const app = server();
+
+        get(
+          app,
+          urlString(),
+          graphqlHTTP({
+            schema: TestSchema,
+            graphiql: { defaultQuery: 'query testDefaultQuery { hello }' },
+          }),
+        );
+
+        const response = await request(app)
+          .get(urlString())
+          .set('Accept', 'text/html');
+
+        expect(response.status).to.equal(200);
+        expect(response.type).to.equal('text/html');
+        expect(response.text).to.include(
+          'defaultQuery: "query testDefaultQuery { hello }"',
+        );
+      });
+
       it('contains a pre-run response within GraphiQL', async () => {
         const app = server();
 

src/index.js

@@ -34,7 +34,7 @@ import {
 } from 'graphql';
 
 import { parseBody } from './parseBody';
-import { renderGraphiQL } from './renderGraphiQL';
+import { renderGraphiQL, type GraphiQLOptions } from './renderGraphiQL';
 
 /**
  * Used to configure the graphqlHTTP middleware by providing a schema
@@ -128,8 +128,9 @@ export type OptionsData = {|
 
   /**
    * A boolean to optionally enable GraphiQL mode.
+   * Alternatively, instead of `true` you can pass in an options object.
    */
-  graphiql?: ?boolean,
+  graphiql?: ?boolean | ?GraphiQLOptions,
 
   /**
    * A resolver function to use when one is not provided by the schema.
@@ -199,7 +200,7 @@ function graphqlHTTP(options: Options): Middleware {
     let executeFn = execute;
     let parseFn = parse;
     let extensionsFn;
-    let showGraphiQL;
+    let showGraphiQL = false;
     let query;
 
     let documentAST;
@@ -254,7 +255,7 @@ function graphqlHTTP(options: Options): Middleware {
         query = params.query;
         variables = params.variables;
         operationName = params.operationName;
-        showGraphiQL = graphiql && canDisplayGraphiQL(request, params);
+        showGraphiQL = canDisplayGraphiQL(request, params) && graphiql;
 
         // If there is no query, but GraphiQL will be displayed, do not produce
         // a result, otherwise return a 400: Bad Request.
@@ -383,6 +384,7 @@ function graphqlHTTP(options: Options): Middleware {
             variables,
             operationName,
             result,
+            options: typeof showGraphiQL !== 'boolean' ? showGraphiQL : {},
           });
           return sendResponse(response, 'text/html', payload);
         }

src/renderGraphiQL.js

@@ -14,6 +14,16 @@ type GraphiQLData = {|
   variables: ?{ [name: string]: mixed },
   operationName: ?string,
   result?: mixed,
+  options: GraphiQLOptions,
+|};
+
+export type GraphiQLOptions = {|
+  /**
+   * An optional GraphQL string to use when no query is provided and no stored
+   * query exists from a previous session.  If undefined is provided, GraphiQL
+   * will use its own default query.
+   */
+  defaultQuery?: ?string,
 |};
 
 // Current latest version of GraphiQL.
@@ -40,6 +50,7 @@ export function renderGraphiQL(data: GraphiQLData): string {
     ? JSON.stringify(data.result, null, 2)
     : null;
   const operationName = data.operationName;
+  const defaultQuery = data.options.defaultQuery;
 
   return `<!--
 The request to this GraphQL server provided the header "Accept: text/html"
@@ -158,6 +169,7 @@ add "&raw" to the end of the URL within a browser.
         response: ${safeSerialize(resultString)},
         variables: ${safeSerialize(variablesString)},
         operationName: ${safeSerialize(operationName)},
+        defaultQuery: ${safeSerialize(defaultQuery)},
       }),
       document.getElementById('graphiql')
     );