Add a "Prettify" button to the in-app GraphQL Console

app/components/user/graphql/GraphQLExplorerConsole.js

@@ -10,7 +10,7 @@ import Dropdown from 'app/components/shared/Dropdown';
 import FlashesStore from 'app/stores/FlashesStore';
 import GraphQLExplorerConsoleEditor from "./GraphQLExplorerConsoleEditor";
 import GraphQLExplorerConsoleResultsViewer from "./GraphQLExplorerConsoleResultsViewer";
-import { executeQuery } from "./query";
+import { executeQuery, prettifyQuery } from "./query";
 import consoleState from "./consoleState";
 import type { RelayProp } from 'react-relay';
 import type { GraphQLExplorerConsoleSnippetQueryResponse } from './__generated__/GraphQLExplorerConsoleSnippetQuery.graphql';
@@ -158,6 +158,15 @@ class GraphQLExplorerConsole extends React.PureComponent<Props, State> {
                 </Button>
               </div>
             </Dropdown>
+
+            <Button
+              theme="default"
+              outline={true}
+              className="ml2"
+              onClick={this.handlePrettifyClick}
+            >
+              Prettify
+            </Button>
           </div>
         </div>
 
@@ -282,6 +291,12 @@ class GraphQLExplorerConsole extends React.PureComponent<Props, State> {
     this.executeCurrentQuery();
   };
 
+  handlePrettifyClick = () => {
+    prettifyQuery(this.state.query, (query) => {
+      this.setState({ query: query });
+    });
+  }
+
   handleShareLinkClick = () => {
     if (this.shareLinkTextInput) {
       this.shareLinkTextInput.select();

app/components/user/graphql/GraphQLExplorerConsoleEditor.js

@@ -107,6 +107,12 @@ class GraphQLExplorerConsoleEditor extends React.PureComponent<Props & LoadedPro
     }
   }
 
+  componentDidUpdate() {
+    if (this.codeMirrorInstance && this.props.value != this.codeMirrorInstance.getValue()) {
+      this.codeMirrorInstance.setValue(this.props.value);
+    }
+  }
+
   render() {
     return (
       <div style={{ height: "100%" }}>

app/components/user/graphql/prettier.js

@@ -0,0 +1,6 @@
+import prettier from "prettier/standalone";
+import graphQLPlugin from "prettier/parser-graphql";
+
+export default function(query) {
+  return prettier.format(query, { parser: "graphql", plugins: [graphQLPlugin] });
+}

app/components/user/graphql/query.js

@@ -26,6 +26,12 @@ export function interpolateQuery(query, interpolations) {
   return query;
 }
 
+export function prettifyQuery(query, callback) {
+  import("./prettier").then((modules) => {
+    callback(modules.default(query));
+  });
+}
+
 export function findQueryOperationNames(query) {
   if (!query) {
     return undefined;

package.json

@@ -140,6 +140,7 @@
     "moment": "2.22.2",
     "moment-duration-format": "https://github.com/ticky/moment-duration-format.git#951b8be1d1b0424824363aa912cbf066546bf384",
     "object-assign": "4.1.1",
+    "prettier": "^1.15.3",
     "prop-types": "15.6.2",
     "pusher-js": "4.3.1",
     "qrcode.react": "0.8.0",

yarn.lock

@@ -12070,6 +12070,11 @@ prettier@^1.14.3:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.14.3.tgz#90238dd4c0684b7edce5f83b0fb7328e48bd0895"
   integrity sha512-qZDVnCrnpsRJJq5nSsiHCE3BYMED2OtsI+cmzIzF1QIfqm5ALf8tEJcO27zV1gKNKRPdhjO0dNWnrzssDQ1tFg==
 
+prettier@^1.15.3:
+  version "1.15.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.15.3.tgz#1feaac5bdd181237b54dbe65d874e02a1472786a"
+  integrity sha512-gAU9AGAPMaKb3NNSUUuhhFAS7SCO4ALTN4nRIn6PJ075Qd28Yn2Ig2ahEJWdJwJmlEBTUfC7mMUSFy8MwsOCfg==
+
 pretty-bytes@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-1.0.4.tgz#0a22e8210609ad35542f8c8d5d2159aff0751c84"