diff --git a/app/components/user/graphql/GraphQLExplorerConsole.js b/app/components/user/graphql/GraphQLExplorerConsole.js index 916053b77..756b79f1c 100644 --- a/app/components/user/graphql/GraphQLExplorerConsole.js +++ b/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 { + + @@ -282,6 +291,12 @@ class GraphQLExplorerConsole extends React.PureComponent { this.executeCurrentQuery(); }; + handlePrettifyClick = () => { + prettifyQuery(this.state.query, (query) => { + this.setState({ query: query }); + }); + } + handleShareLinkClick = () => { if (this.shareLinkTextInput) { this.shareLinkTextInput.select(); diff --git a/app/components/user/graphql/GraphQLExplorerConsoleEditor.js b/app/components/user/graphql/GraphQLExplorerConsoleEditor.js index 6227f3f2f..10164e2df 100644 --- a/app/components/user/graphql/GraphQLExplorerConsoleEditor.js +++ b/app/components/user/graphql/GraphQLExplorerConsoleEditor.js @@ -107,6 +107,12 @@ class GraphQLExplorerConsoleEditor extends React.PureComponent diff --git a/app/components/user/graphql/prettier.js b/app/components/user/graphql/prettier.js new file mode 100644 index 000000000..d449de224 --- /dev/null +++ b/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] }); +} diff --git a/app/components/user/graphql/query.js b/app/components/user/graphql/query.js index 6298109e2..4149b4ec6 100644 --- a/app/components/user/graphql/query.js +++ b/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; diff --git a/package.json b/package.json index 1cd51924b..e8c0177e8 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 7b6a4258c..8a301b0e0 100644 --- a/yarn.lock +++ b/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"