From 4b4b659d90666ebacb2a6ed4c6259287275dec40 Mon Sep 17 00:00:00 2001
From: Rikki Schulte <rikki.schulte@gmail.com>
Date: Tue, 14 Jun 2022 17:37:58 +0200
Subject: [PATCH] feat: add prettier!

---
 .changeset/fair-snails-drum.md                |  6 +++++
 packages/graphiql-react/package.json          |  3 ++-
 packages/graphiql-react/src/editor/hooks.ts   | 24 +++++++++++++------
 .../cypress/integration/prettify.spec.ts      |  3 ++-
 yarn.lock                                     |  5 ++++
 5 files changed, 32 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/fair-snails-drum.md

diff --git a/.changeset/fair-snails-drum.md b/.changeset/fair-snails-drum.md
new file mode 100644
index 00000000000..44fc53e5fee
--- /dev/null
+++ b/.changeset/fair-snails-drum.md
@@ -0,0 +1,6 @@
+---
+'graphiql': patch
+'@graphiql/react': patch
+---
+
+Introduce prettier formatting support to graphiql
diff --git a/packages/graphiql-react/package.json b/packages/graphiql-react/package.json
index 67c3af6219c..437265a4306 100644
--- a/packages/graphiql-react/package.json
+++ b/packages/graphiql-react/package.json
@@ -37,7 +37,8 @@
     "escape-html": "^1.0.3",
     "graphql-language-service": "^5.0.6",
     "markdown-it": "^12.2.0",
-    "set-value": "^4.1.0"
+    "set-value": "^4.1.0",
+    "prettier": "^2.7.0"
   },
   "devDependencies": {
     "@types/codemirror": "^5.60.5",
diff --git a/packages/graphiql-react/src/editor/hooks.ts b/packages/graphiql-react/src/editor/hooks.ts
index 7b0cffa77fa..648b47896d9 100644
--- a/packages/graphiql-react/src/editor/hooks.ts
+++ b/packages/graphiql-react/src/editor/hooks.ts
@@ -1,7 +1,7 @@
 import { fillLeafs, GetDefaultFieldNamesFn, mergeAst } from '@graphiql/toolkit';
 import { EditorChange } from 'codemirror';
 import copyToClipboard from 'copy-to-clipboard';
-import { parse, print } from 'graphql';
+import { print } from 'graphql';
 import { useCallback, useEffect } from 'react';
 
 import { useExplorerContext } from '../explorer';
@@ -208,12 +208,22 @@ export function usePrettifyEditors({
     }
 
     if (queryEditor) {
-      const editorContent = queryEditor.getValue();
-      const prettifiedEditorContent = print(parse(editorContent));
-
-      if (prettifiedEditorContent !== editorContent) {
-        queryEditor.setValue(prettifiedEditorContent);
-      }
+      import('prettier/standalone').then(({ default: prettier }) => {
+        import('prettier/parser-graphql').then(({ default: graphqlPlugin }) => {
+          try {
+            const editorContent = queryEditor.getValue();
+            const prettifiedEditorContent = prettier.format(editorContent, {
+              parser: 'graphql',
+              plugins: [graphqlPlugin],
+            });
+            if (prettifiedEditorContent !== editorContent) {
+              queryEditor.setValue(prettifiedEditorContent);
+            }
+          } catch {
+            // as always on format, no-op on parser failures
+          }
+        });
+      });
     }
   }, [queryEditor, variableEditor, headerEditor]);
 }
diff --git a/packages/graphiql/cypress/integration/prettify.spec.ts b/packages/graphiql/cypress/integration/prettify.spec.ts
index f1a033e5809..3507b44bc49 100644
--- a/packages/graphiql/cypress/integration/prettify.spec.ts
+++ b/packages/graphiql/cypress/integration/prettify.spec.ts
@@ -10,7 +10,8 @@ const prettifiedQuery = `{
   longDescriptionType {
     id
   }
-}`;
+}
+`;
 
 const prettifiedVariables = `{
   "a": 1
diff --git a/yarn.lock b/yarn.lock
index 8e90243f357..cd95d5feb50 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15752,6 +15752,11 @@ prettier@^2.0.4:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.4.tgz#2d1bae173e355996ee355ec9830a7a1ee05457ef"
   integrity sha512-SVJIQ51spzFDvh4fIbCLvciiDMCrRhlN3mbZvv/+ycjvmF5E73bKdGfU8QDLNmjYJf+lsGnDBC4UUnvTe5OO0w==
 
+prettier@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.0.tgz#a4fdae07e5596c51c9857ea676cd41a0163879d6"
+  integrity sha512-nwoX4GMFgxoPC6diHvSwmK/4yU8FFH3V8XWtLQrbj4IBsK2pkYhG4kf/ljF/haaZ/aii+wNJqISrCDPgxGWDVQ==
+
 pretty-bytes@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.5.0.tgz#0cecda50a74a941589498011cf23275aa82b339e"