fix: prettify graphql query variables

Kong · May 19, 2022 · 79e0032 · 79e0032
1 parent fe20729
commit 79e0032
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git a/packages/insomnia-prettify/src/fixtures/nunjucks-output.json b/packages/insomnia-prettify/src/fixtures/nunjucks-output.json
@@ -4,4 +4,3 @@
   {# This is a comment #}
   "tag": {% foo 'bar', "baz" %}
 }
-
diff --git a/packages/insomnia-prettify/src/json.ts b/packages/insomnia-prettify/src/json.ts
@@ -29,7 +29,7 @@ const NUNJUCKS_CLOSE_STATES: {
 /**
  * Format a JSON string without parsing it as JavaScript.
  *
- * Code taken from jsonlint (http://zaa.ch/jsonlint/)
+ * Code taken from JSON Lint (https://github.com/zaach/jsonlint)
  */
 export const prettify = (json?: string, indentChars = '\t', replaceUnicode = true) => {
   if (!json) {
@@ -132,9 +132,6 @@ export const prettify = (json?: string, indentChars = '\t', replaceUnicode = tru
         }
         continue;
       case '}':
-        indentLevel--;
-        newJson += '\n' + repeatString(tab, indentLevel) + currentChar;
-        continue;
       case ']':
         indentLevel--;
         newJson += '\n' + repeatString(tab, indentLevel) + currentChar;

diff --git a/packages/insomnia/src/ui/components/editors/body/graph-ql-editor.tsx b/packages/insomnia/src/ui/components/editors/body/graph-ql-editor.tsx
@@ -102,6 +102,7 @@ export class GraphQLEditor extends PureComponent<Props, State> {
   _documentAST: null | DocumentNode = null;
   _isMounted = false;
   _queryEditor: null | EditorFromTextArea = null;
+  _queryVariableEditor: null | EditorFromTextArea = null;
   _schemaFetchTimeout: NodeJS.Timeout | null = null;
 
   constructor(props: Props) {
@@ -281,6 +282,10 @@ export class GraphQLEditor extends PureComponent<Props, State> {
     this._handleBodyChange(query, variables, operationName);
   }
 
+  _handleQueryVariableEditorInit(codeMirror: EditorFromTextArea) {
+    this._queryVariableEditor = codeMirror;
+  }
+
   async _fetchAndSetSchema(rawRequest: Request) {
     this.setState({
       schemaIsFetching: true,
@@ -468,19 +473,32 @@ export class GraphQLEditor extends PureComponent<Props, State> {
   _handlePrettify() {
     const { body } = this.state;
     const { variables, query } = body;
+    const { editorIndentWithTabs, editorIndentSize } = this.props.settings;
     const prettyQuery = prettier.format(query, {
       parser: 'graphql',
-      useTabs: this.props.settings.editorIndentWithTabs,
-      tabWidth: this.props.settings.editorIndentSize,
+      useTabs: editorIndentWithTabs,
+      tabWidth: editorIndentSize,
     });
-    const prettyVariables = variables && JSON.parse(jsonPrettify(JSON.stringify(variables)));
+
+    let prettyVariablesString: string | undefined;
+    let prettyVariables: Record<string, any> | undefined;
+
+    if (variables) {
+      const indentChars = (editorIndentWithTabs) ? '\t' : ' '.repeat(editorIndentSize);
+      prettyVariablesString = jsonPrettify(JSON.stringify(variables), indentChars);
+      prettyVariables  = prettyVariablesString && JSON.parse(prettyVariablesString);
+    }
 
     this._handleBodyChange(prettyQuery, prettyVariables, this.state.body.operationName);
 
     // Update editor contents
     if (this._queryEditor) {
       this._queryEditor.setValue(prettyQuery);
     }
+
+    if (this._queryVariableEditor && prettyVariablesString) {
+      this._queryVariableEditor.setValue(prettyVariablesString);
+    }
   }
 
   _getOperations(): any[] {
@@ -820,6 +838,7 @@ export class GraphQLEditor extends PureComponent<Props, State> {
             }}
             noLint={!variableTypes}
             onChange={this._handleVariablesChange}
+            onCodeMirrorInit={this._handleQueryVariableEditorInit}
             mode="graphql-variables"
             placeholder=""
           />