Fix graphql and other things

src-web/components/editors/GraphQLEditor.tsx

@@ -1,12 +1,12 @@
+import { formatSdl } from 'format-graphql';
 import { useMemo } from 'react';
+import { useUniqueKey } from '../../hooks/useUniqueKey';
 import { Divider } from '../core/Divider';
 import type { EditorProps } from '../core/Editor';
 import { Editor } from '../core/Editor';
+import { IconButton } from '../core/IconButton';
 
-type Props = Pick<
-  EditorProps,
-  'heightMode' | 'onChange' | 'defaultValue' | 'className' | 'useTemplating'
->;
+type Props = Pick<EditorProps, 'heightMode' | 'onChange' | 'defaultValue' | 'className'>;
 
 interface GraphQLBody {
   query: string;
@@ -15,6 +15,7 @@ interface GraphQLBody {
 }
 
 export function GraphQLEditor({ defaultValue, onChange, ...extraEditorProps }: Props) {
+  const queryKey = useUniqueKey();
   const { query, variables } = useMemo<GraphQLBody>(() => {
     try {
       const p = JSON.parse(defaultValue ?? '{}');
@@ -36,21 +37,39 @@ export function GraphQLEditor({ defaultValue, onChange, ...extraEditorProps }: P
   };
 
   const handleChangeVariables = (variables: string) => {
-    handleChange({ query, variables: JSON.parse(variables) });
+    try {
+      handleChange({ query, variables: JSON.parse(variables) });
+    } catch (e) {
+      // Meh, not much we can do here
+    }
   };
 
   return (
     <div className="pb-1 h-full grid grid-rows-[minmax(0,100%)_auto_auto_minmax(0,auto)]">
-      <Editor
-        heightMode="auto"
-        defaultValue={query ?? ''}
-        onChange={handleChangeQuery}
-        contentType="application/graphql"
-        {...extraEditorProps}
-      />
+      <div className="relative">
+        <Editor
+          key={queryKey.key}
+          heightMode="auto"
+          defaultValue={query ?? ''}
+          onChange={handleChangeQuery}
+          contentType="application/graphql"
+          {...extraEditorProps}
+        />
+        <IconButton
+          size="sm"
+          title="Re-format GraphQL Query"
+          icon="eye"
+          className="absolute bottom-2 right-0"
+          onClick={() => {
+            handleChangeQuery(formatSdl(query));
+            setTimeout(queryKey.regenerate, 200);
+          }}
+        />
+      </div>
       <Divider />
       <p className="pt-1 text-gray-500 text-sm">Variables</p>
       <Editor
+        useTemplating
         heightMode="auto"
         defaultValue={JSON.stringify(variables, null, 2)}
         onChange={handleChangeVariables}