Allow to override GraphiQL default query (#508)

Use a lot of ideas from #507 by @rybon

Author: IvanGoncharov

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')
  );